其他分享
首页 > 其他分享> > 手写防抖(Debouncing)和节流(Throttling)

手写防抖(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。。。。。。

<style></style> <style></style> <style></style> <style></style>

标签:function,防抖,函数,Throttling,args,timer,Debouncing,now,fn
来源: https://www.cnblogs.com/wuconghui/p/10998106.html