防抖debounce与节流throttle

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

一：函数防抖

1、理解：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

2、思路：每次触发事件时都取消之前的延时调用方法

3、实现：

  debounce(func, delay) {
    let timer = null
    return function (...args) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
      // 利用apply改变this的指向
        func.apply(this, args)
      }, delay)
    }
  }

二：函数节流

1、理解：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

2、解释：每次触发事件时都判断当前是否有等待执行的延时函数

3、实现：
（1）利用时间戳实现：

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

（2）利用计时器实现：

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

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且

每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间

（参数wait）调用函数。