函数防抖和节流

函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。通俗来讲就是：假设一个按钮在2000毫秒内被点击100次，等到最后一次触发该函数开始计时，过了delay毫秒后才会触发一次函数。

function ajax(content) {
  console.log('ajax request ' + content)
}
function debounce(fun, delay) {
	var timer = null;
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(timer)
        timer = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
})

当触发keyup事件后，隔500ms执行一次ajax()，但是如果在这500ms内又一次触发该事件，那么就会清除定时器，重新计算时间。

首次立即执行

function debounce(func, delay, immediate) {
  let timeout;

  return function() {
    const context = this;
    const args = arguments;

    const later = function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, delay);

    if (callNow) {
      func.apply(context, args);
    }
  };
}

---

函数节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。通俗来讲，就是在delay毫秒的时间内，函数只会触发一次。两次触发时间的间隔一定大于delay毫秒。

function ajax(content) {
    console.log(...content, new Date());
}
// 时间戳实现
function throttle(fn, delay) {
     // 记录上一次函数触发的时间
     var lastTime = 0;
     return function() {
         let _args = arguments
         // 记录当前函数触发的时间
         var nowTime = Date.now();
         if (nowTime - lastTime > delay) {
             // 修正this指向问题
             fn.call(this, _args);
             // 同步时间
             lastTime = nowTime;
         }
     }
 }
// 定时器实现
 function throttle2(fn, delay) {
     // 记录上一次函数触发的时间
     var timer = null;
     return function() {
         let _args = arguments
         if (!timer) {
             timer = setTimeout(() => {
             	timer = null;
				fn.call(this, _args);
			}, delay)
         }
     }
 }
let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function(e) {
    throttleAjax(e.target.value)
})

注意： let now = +new Date()是将时间直接转为时间戳表示，相当于Date.prototype.getTime()方法，以下四种方法执行的效果相同

console.log(+new Date());
console.log(new Date().getTime());
console.log(new Date().valueOf());
console.log(new Date()*1);

可以看到上图在1000ms内不管你触发多少次，都只会执行一次回调函数。

---

应用场景

• 防抖：
  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
• 节流：
  鼠标不断点击触发，mousedown(单位时间内只触发一次)
  监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

日常使用中节流的问题和解决方案

节流使用时间戳实现的版本最后一次可能会导致无法调用（在延迟时间内，无法被调用）
修改：在每次调用时都会记录参数，并且如果在延迟时间内再次被调用，它会取消前一个调用并安排一个新的调用。这样，最后一次调用总是会被执行，即使它发生在延迟时间内。

  function throttle(func, delay) {
    let lastCall = 0;
    let timeoutId = null;
    let lastArgs = null;
    
    return function () {
      const now = new Date().getTime();
      lastArgs = arguments;
      if (now - lastCall < delay) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          lastCall = now;
          func.apply(this, lastArgs);
        }, delay);
      } else {
        lastCall = now;
        func.apply(this, arguments);
      }
    }
  }

节流函数第一次和最后一次必须执行

  function throttle(func, delay) {
    let lastCall = 0;
    let timeoutId = null;
    return function () {
      const now = new Date().getTime();
      if (now - lastCall < delay) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          lastCall = now;
          func.apply(this, arguments);
        }, delay);
      } else {
        lastCall = now;
        func.apply(this, arguments);
      }
    }
  }

本文借鉴博客