节流函数

节流：限制函数在一定时间内只执行一次。

为什么要使用节流函数

有一些事件或者函数，会被频繁地触发（短时间按多次触发），非常消耗性能甚至造成浏览器卡死

代码实现

// 时间戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

// 时间戳 + 定时器方案
   function throttle(fn, timeDelay) {
          let timer = null; // 定时器
          let lastTime; 
          timeDelay = timeDelay || 1000;
          return function () {
            let context = this; 
            // 获取函数参数
            let args = arguments; 
            // 记录本次函数触发时间
            let nowTime = Date.now();
            if (timeDelay && nowTime - lastTime < timeDelay) {
            clearTimeout(timer);
              timer = setTimeout(() => {
              // 记录上次函数触发时间
                lastTime = nowTime;
                //修正this指向
                fn.apply(context, args);
              }, timeDelay);
            }
            // 第一次执行或已经执行过但是函数两次触发间隔超过节流时间
            else { 
              lastTime = nowTime;
              fn.apply(context, args);
            }
          };
        }

节流的使用场景

1. 懒加载、滚动加载、加载更多或监听滚动条位置；
2. 百度搜索框，搜索联想功能；
3. 防止高频点击提交，防止表单重复提交；