JavaScript中防抖节流方法整理

防抖

对于短时间内高频率触发的事件，防抖的意义就是在某个时间期限内，事件处理函数只执行一次；
也可以这样理解：某个时间期限内没有再触发事件，事件处理函数才会执行

//防抖是一段时间内只执行最后一次
function debounce(fn, delay) {
    let timer = null //借助闭包
    return function () {
        var that = this;
        var argument = arguments;
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(function(){
            fn.apply(that,argument)
        },delay)
    }
}
function showTop(name) {console.log(name); }
let test = debounce(showTop, 1000) 
test(2)
// 在1s内没有再触发test事件，会执行showTop事件处理函数

节流

对于短时间内高频率触发的事件，节流的意义就是每隔一段时间执行一次时间处理函数

function throttle(fn, delay) {
    let valid = true
    return function () {
        let that =this;
        let argumentList = arguments
        if (!valid) {
            //休息时间 暂不接客
            return false
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn.apply(that,argumentList)
            valid = true;
        }, delay)
    }
}
function showTop(name) {console.log(name); }
let test = debounce(showTop, 1000) 
test(2)
//假设不断触发test事件，每隔1s会执行一次showTop事件