项目综合经验1.0 - 防抖和节流

1. 函数防抖（debounce）：

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

• 示例：

 debounce(fun, delay = 500) {
      let timer = null;
      return function(...rest) {
        if (timer)
          //每次进入 调用这个函数都会清除上一次 注册的定时器
          clearTimeout(timer);
        timer = setTimeout(() => {
          console.log(666);

          fun.apply(this, rest); // 延时调用
        }, delay);
      };
    }

• 应用

  有的实际项目中， 可以使用防抖 减少请求数据的频率，减轻 服务器负担

2.函数节流（throttle）：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数

• 示例：：

时间戳的形式:

var throttle = function(func, delay) {            
  var prev = Date.now();            
  return function() {                
    var context = this;                
    var args = arguments;                
    var now = Date.now();                
    if (now - prev >= delay) {                    
      func.apply(context, args);                    
      prev = Date.now();                
    }            
  }        
}        

定时器形式）：

// 节流throttle代码（定时器）：
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        

更简单的就是 设置一个变量，标志事件的完成，在上一个事件完成之前这次事件不会触发,在某一次事件处理函数完成后，更改这个标志变量。