防抖与节流

二者区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

一、防抖

原理：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发

/**
 * 防抖函数
 * @param {需要执行的函数} func 
 * @param {延迟时间} wait 
 * @param {是否立即执行} immediate
 */
function debounce(func, wait, immediate) {
  var timer;
  immediate = immediate || false;
  return function() {
    var that = this,
      args = arguments;
    if (immediate && !timer) {
      func.apply(that, args);
    }
    if(timer){ clearTimeout(timer)};
    timer = setTimeout(function() {
      func.apply(that, args);
    }, wait);
  };
}

一、节流

原理：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

// 节流throttle代码（时间戳+定时器，立即执行加最后一次触发事件后也还会执行一次事件处理函数）：
/**
 * 节流函数
 * @param {需要执行的函数} func 
 * @param {执行间隔时间} delay 
 */
function throttle(func, delay) {     
    var timer = null;     
    var startTime = Date.now();//绑定时的时间 
    return function() {             
        var curTime = Date.now();   //滚动时的时间          
        var remaining = delay - (curTime - startTime);
        //因为是高频触发，这里认为startTime必定大于curTime，且差值必定大于delay
        //如果你非要在网页加载delay毫秒以内就去滚动网页的话，我也没办法
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}