防抖函数和节流函数

一、防抖和节流

什么是防抖：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内不允许多次触发。