函数的防抖与节流

防抖

固定时间去触发一次

function throttle(func,wait) {
    let prev = 0;
    return function () {
      let now = Date.now();
      if(now-prev>=wait){
        func();
        prev=now;
      }
    }
  }
复制代码

关于它的使用：

// 每隔5秒才能有效点击 button
button.onclick = throttle(function(){
    console.log('log');
},5000)
复制代码

假如，我在最后一次点击时，5秒倒计时还没到，那么最后一次点击无效。如今的需求是想把最后一次的点击也显示出来

button.onclick = throttle(function(){
    console.log('log');
},5000,{trailing:true}) // 最后一次点击也触发

复制代码

咱们开始写代码：

function throttle(func,wait,options) {
    // trailing 最后一次应该触发（默认触发）
    let args,context,prev=0,timeout;
    let later = function (params) {
      prev = Date.now();
      func.apply(context,args);
    }
    return function () {
      args = arguments;
      context = this;
      let now = Date.now();
      let remaining = wait - (now - prev);
      if(remaining <=0){//每一个阶段的第一次；
        if(timeout){//若是过了5秒中，还在点击，清除掉刚才设定的定时器
          clearTimeout(timeout);
          timeout = null;
        }
        func.apply(context,args);
        prev = now;

      }else if(!timeout && options.trailing !== false){
        timeout = setTimeout(later,remaining);
      }
    }
  }
复制代码

节流

高频的操做结束后触发一次,即每次操做在指定的延迟时间内没有第二次操做，就会触发。

function debounce(fn,wait){
    let timer = null
    return function(){
        cleatTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,arguments);
        },wait)
    }
}
复制代码

使用方法：

window.addEventListener('scroll',debounce(function(){
  console.log('scroll')
},500))
复制代码

若是我想在第一次滚动时，就触发这个函数，该怎么作呢？

window.addEventListener('scroll',debounce(function(){
  console.log('scroll')
},500,true)) // true 要求第一次滚动事件也触发
复制代码

function debounce(fn,wait){
      let timer = null
      return function(){
          cleatTimeout(timer);
          if(immediate){
            //首次点击时，执行fn
            !timer?fn.apply(this,arguments):''; 
          }
          timer = setTimeout(()=>{
              fn.apply(this,arguments);
          },wait)
      } 
    }
复制代码