手写防抖(Debouncing)和节流(Throttling)

1、防抖函数

　　典型的例子：限制鼠标的连击触发

　　当一次事件触发后，事件处理器要等一定阈值的时间，如果这段时间过去后，再也没有事件发生，就处理最后一次发生的事件。

　　假设还差0.01秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定的时间

// 防抖动函数
function debounce(fn,wait=50,immediate) {
    let timer;
    return function() {
        if(immediate) {
            fn.apply(this,arguments)
        }
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=> {
            fn.apply(this,arguments)
        },wait)
    }
}

结合一下实例：滚动防抖

// 简单的防抖动函数
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}

// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);

2、节流：

　　可以理解为事件在一个管道中传输，加上这个节流阀以后，事件的流速就会减慢。

　　实际上这个函数的作用就是如此，它可以将一个函数的调用频率限制在一定阈值内，例如 1s，那么 1s 内这个函数一定不会被调用两次

　　

简单的节流函数：

function throttle(fn, wait) {
    let prev = new Date();
    return function() { 
        const args = arguments;
        const now = new Date();
        if (now - prev > wait) {
            fn.apply(this, args);
            prev = new Date();
        }
    }

3、结合实践

　　通过第三个参数来控制切换

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

 

　　ending。。。。。。