防抖与节流

函数防抖

• 在事件被触发n秒后再次执行回调，如果在这n秒内又被触发，则重新计时
  tips：每次点击都会先看是否开启定时器，开启了就清除定时器 思路：利用定时器，每次触发都清除定时器

 function myDebounce(handle,wait){
    if(typeof handle != 'function') throw new Error('handle must be an function')
    if(typeof wait === 'undefined') wait = 300
    let timer = null
    return function proxy(...args){
        let self = this
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
            // call 改变this指向
            handle.call(self, ...args)
        }, wait)
    }
 }

函数节流 每隔一段时间，只执行一次函数

• 定时器实现节流函数
• 函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，定时器实现节流函数通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。
  思路：利用定时器，每次触发判断是否有定时器，如果有等定时器，直接返回，等定时器结束再开启新的定时器

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            clearTimeout(timer)
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

异同比较

相同点：

• 都可以通过使用 setTimeout 实现。
• 目的都是，降低回调执行频率。节省计算资源。

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
• 函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。