防抖节流函数

防抖节流函数

一、防抖函数（debounce）

防抖函数：一个需要频繁触发的函数，在规定的时间内，只让最后一次生效，前面的不生效。
常见例子：搜索框中输入关键字自动发送网络请求。

function debounce(fn,delay){
      // 记录上一次的延时器
      var timerId = null;
      // 使用闭包保存 timerId
      return function(...args){
        // 清除上一个延时器
        clearTimeout(timerId);
        // 重新设置定时器
        timerId = setTimeout(()=>{
          fn.apply(this,args);
        },delay);
      }
    };
    // 模拟输入框防抖
    document.querySelector('.search').oninput = debounce(function(){
      console.log('用户输入了');
    },400);

二、节流函数（throttle）

节流函数：限制一个函数在一定时间内只能执行一次。
比如：有个需要频繁触发的函数，处于优化性能的角度，只让函数触发的第一次生效，后面的不生效。
高频事件：onscroll oninput resize onkeyup onkeydown onkerpress onkeyup(每键入一个字母触发一次)

function throttle(fn,delay){
    var lastTime = 0;
    // 闭包
    return function(){
      // 记录当前函数触发的时间
      var nowTime = Date.now();
      // 必须大于传入的 200ms才能再次触发
      if(nowTime - lastTime > delay){
        // 触发函数并修正 this指向
        fn.apply(this,arguments);
        // 同步时间
        lastTime = nowTime;
      }
    };
  };
  // 设置触发一次后需要再大于 200ms再触发
  document.onscroll = throttle(function(){
    console.log('触发了滚动事件' + Date.now());
  },200);