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);
        }
    }
}

应用场景

记录鼠标或页面滚动位置