js函数防抖debounce和节流throttle

一，防抖

1. 每执行一次函数，都要等待固定的时间后。。才会去执行函数。应用场景：输入搜索。快速点击按钮触发请求等。
2. debouce的模拟实现；

Function.prototype.myDebounce = function(callback, wait) {
    let timer = null;
    return function(...rest) {
        if(timer) {
            // 如果上次的定时器还存在，则清除。重新等待时间
            clearTimeout(tiemr);
        }
        setTimeout(()=> {// 使用箭头函数，确保this还能定义在当前执行环境
            // 里边的闭包的this必须保持和callback保持一致。确保使用ok
            callback.apply(this, rest);
        }, wait)
    }
}
复制代码

二，节流

1. 在一段时间内。无论触发多少次函数。都只执行一次。应用场景：滚动拉接口加载数据等。
2. throttle的模拟实现

Function.prototype.myThrottle = function(cb, wait) {
    let flag = false;
    return function(...arg) {
        if(flag) {
            return;
        }
        flag = true;
        setTimeout(() => {
            cb.apply(this, arg);
            flag = false;
        }, wait)
    }
}
复制代码

转载于:https://juejin.im/post/5cce92d5e51d453a7d63b6d7