js节流,时间戳节流和定时器节流

节流

和防抖区别是,防抖是间隔时间后最后执行一次,节流是按间隔时间连续执行

时间戳截流——首节流

用最新触发的时间减去上一次回调执行的时间,如果大于等于 wait 则会执行回调

时间戳节流在第一次触发时会立刻执行。

在第一次操作的时候就会执行一遍fn,之后的操作如果时间不超过delay(例如2s)就不会在执行函数,理解为第一次执行,最后一次不执行

function throttle(func, wait) {
  let previous = 0
  return function throttled(...args) {
    const ctx = this
    const now = Date.now()
    const remain = wait - (now - previous)
    if (remain <= 0) {
      func.apply(ctx, args)
      previous = now
    }
  }
}

定时器节流——尾节流

指定时间之后执行回调,触发一个定时器之后,即使再次触发节流函数,也不会导致定时器推迟执行(事件循环或者同步阻塞会导致延迟执行,在这里不用考虑)。它不会清除已经开始的定时器,而是等待定时器被执行之后才再开始下一个定时器。

理解为第一次不执行,最后一次执行

function throttle(func, wait) {
  let timeout = 0
  return function throttled(...args) {
    const ctx = this
    // 如果已经是定时器定时阶段,则直接跳过,相当于忽略了触发
    // 必须等到定时器到时间之后
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(ctx, args)
        timeout = null
      }, wait)
    }
  }
}

兼顾型节流

兼顾型节流,就能够在第一次,最后一次都执行代码。

function throttle(fn, delay){
    let last=0;
    let timer=null;

    return function(){
        let now=Date.now();
        let reming=delay-(now-last);

        clearTimeout(timer);//不管三七二十一,有定时器都先清除定时器
        if(reming<0){
            fn.apply(this, arguments);
            last=now;
        }else{
            timer=setTimeout(()=>{
                fn.apply(this,arguments);
            }, reming);
        }
    }
}

应用场景

记录鼠标或页面滚动位置

版权声明:
作者:wuhou123
链接:https://wuhou.fun/500.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
js节流,时间戳节流和定时器节流
节流 和防抖区别是,防抖是间隔时间后最后执行一次,节流是按间隔时间连续执行 时间戳截流——首节流 用最新触发的时间减去上一次回调执行的时间,如果大于等于 ……
<<上一篇
下一篇>>
文章目录
关闭
目 录