防抖和节流

主要作用就是限制事件的频繁发送

防抖和节流的定义

• 防抖：在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行

  • 例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求

  • 规定时间内操作时，新的事件会覆盖旧的事件，超过这个时间才会触发

• 节流：在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发

  • 例如: 验证码60秒内不可以再次触发(实际开发肯定是使用禁止,但是原理和验证码一样)

  • 规定时间内操作时，新的事件必须要等到旧的事件触发介绍，只有等到规定事件介绍才能触发新的事件

防抖

const inputEl = document.querySelector("input")
inputEl.oninput = debounce(function () {
    console.log(this.value);
}, 500)
​
function debounce(fn, s) {
    let time = null
    return function () {
        if (time !== null) {
            clearTimeout(time)
        }
        time = setTimeout(() => {
            console.log(this);
            fn.call(this)
        }, s)
​
    }
}

节流

window.onscroll = throttle(function () {
    console.log('等待0.5秒才能操作');
}, 500)
function throttle(fn, s) {
    let flag = true
    return function () {
        if (flag) {
            setTimeout(() => {
                fn.call(this)
                flag = true
            }, s)
        }
        flag = false
    }
}