JavaScript之防抖节流

函数防抖（debounce）：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重头开始计算函数执行需要的时间。

函数节流（throttle）：就是指连续触发事件，但是在 n 秒中只执行一次函数，时间间隔小于n秒触发事件都是无效的。

共通点：两者一般适合用在频繁对某事件进行操作的场景。

函数防抖

典型应用

• 百度搜索框在输入稍有停顿时才更新推荐热词。
• 频繁操作点赞和取消点赞，需要获取最后一次操作结果并发送给服务器

原理实现

//函数防抖
function debounce(handle, delay) {
  var delay = delay || 300;
  var timer = null;
  return function () {
    var _this = this;
    var _args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function (){
      handle.apply(_this, _args);
    }, delay);
  }
}

函数节流

一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。

典型应用：

• 抢券时疯狂点击，既要限制次数，又要保证先点先发出请求
• 轮播图左右方向点击
• 窗口调整（window.onresize）
• 页面滚动（window.onscroll）

原理实现

// 函数节流
function throttle(handle, wait) {
  var wait = wait || 300;
  var lastTime = 0;
  return function () {
    var _this = this;
    var _args = arguments;
    var nowTime = new Date().getTime();
    if ((nowTime - lastTime) > wait) {
        handle.apply(_this, _args);
        lastTime = nowTime;
      }
    }
}