一、防抖和节流
什么是防抖：n秒内无再次触发，才会执行事件函数，n秒触发一次事件，当n秒内再次触发，从当前时间延长n秒再执行，有些抽象自己想吧......
什么是节流：多次触发函数的时候，不让这个函数执行的次数太多，减少执行频率，执行了一次之后，n秒内不允许多次执行，n秒过后才可以再次触发。
二、js中的两种定时器：setTimeOut、setInterVal
setTimeOut：该定时器n秒后触发一次函数，只会执行一次。
setInterVal：该定时器n秒执行一次函数，循环多次执行。
三、call、apply、bind的区别
call：call可以改变this的指向，并且直接调用该函数，第一个参数是this的指向，第二个参数及其以后的参数都是想要传递的参数数据。
apply：apply可以改变this的指向，并且直接调用该函数，两个参数，第一个参数是this的指向，第二个参数是想要传递的参数数据，这个参数数据是一个数组。
bind：bind可以改变this指向，但是不会调用该函数，会返回一个新函数，需要手动调用，第一个参数是this的指向，第二个参数及其以后的参数都是想要传递的参数数据。
function Person(name, age) {
this.name = name
this.age = age
this.sayHi = function () {
console.log("------------------------------------------")
console.log("this指向：", this)
console.log("传递的数据: ", arguments)
console.log(this.name + "说" + "Hi~~~")
}
}
const p1 = new Person("zs", 18)
const p2 = new Person("ls", 20)
p1.sayHi("zs")
p1.sayHi.call(p2, "ls", 100)
p1.sayHi.apply(p2, ["ls", 100, 200])
p1.sayHi.bind(p2, "ls", 100, 200, 300)()
四、防抖函数和节流函数
先来看一下没有经过防抖的效果
使用正常function函数代码如下：
<script>
// 此时文本框每次输入都会触发input事件
document.querySelector("input").addEventListener("input", function (e) {
console.log(this, e.target.value)
})
</script>
效果如下：
使用普通函数this指向input DOM对象
使用箭头函数代码如下：
document.querySelector("input").addEventListener("input", (e) => {
console.log(this, e.target.value)
})
效果如下：
使用箭头函数this指向window
使用防抖函数：
document.querySelector("input").addEventListener(
"input",
debounce(function (e) {
console.log(this) // this指向 input DOM对象 如果没有通过apply或者call改变this指向，直接调用，this指向window
console.log(e.target.value)
}, 1000)
)
// fn: 对哪个事件进行防抖 function函数
// wait：等待的时间，时间间隔
function debounce(fn, wait) {
console.log(this, "debounce") // this指向window
let timer = null
return function () {
// console.log(arguments)
let that = this // 这里的this指向input DOM对象
let args = arguments[0] // 将事件对象e保存 并且传递
// 如果存在定时器就清除，并且重新开启定时器
timer && clearTimeout(timer)
timer = setTimeout(function () {
// fn(args) 直接调用，this指向window，如果传递过来的是箭头函数，this指向上一级的this
// 不管通过call改没改变this，都会指向上一级，上一级的this就是 window
fn.call(that, args) // 将this指向改为input
}, wait)
}
}
使用完防抖函数效果如下：
此时1s内不再触发了，这个事件就会执行。
使用节流函数：
document.querySelector("input").addEventListener(
"input",
throttle(function (e) {
console.log(this) this指向 input DOM对象
console.log(e.target.value)
}, 1000)
)
function throttle(fn, wait) {
let flag = false
let timer = null
return function () {
let that = this
let args = arguments[0]
if (flag) return
fn.call(this, args) // 先执行一次
// fn.call(this, args)
flag = true
timer = setTimeout(() => {
flag = false
}, wait) // n秒内不允许触发
}
}
使用完节流函数效果如下：
首先执行一次，然后后边1s触发一次，就相当于1s内不允许多次触发。
