JavaScript函数防抖和节流

概述

函数防抖是指将多次触发合并成一次执行，一般情况下都是合并到最后一次触发执行。函数节流是指在一段时间内执行一次，有可能触发在开始位置，也有可能在这段时间结束位置。其目的都是减少系统消耗，缩减执行频率，提升系统整体执行效率。

浏览器兼容事件处理程序

const EventUtil = {
  register(el, type, handler) {      //事件注册
    if (el.addEventListener) {
      el.addEventListener(type, handler, false);  //false事件冒泡阶段触发
    } else if (el.attachEvent) {
      el.attachEvent(`on${type}`, handler);
    } else {
      el[`on${type}`] = handler;
    }
  },
  remove(el, type, handler) {    //删除事件回调
    if (el.removeEventListener) {
      el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
      el.detachEvent(`on${type}`, handler);
    } else {
      el[`on${type}`] = null;
    }
  }
}

函数防抖Debounce

// 加入要监听页面鼠标滚动事件
// 正常绑定
const handler = function (e) { console.log("scroll"); }    //事件触发后执行的代码
EventUtil.register(window, "scroll", handler);      //注册事件
//控制台会不停的打印 scroll ，这样的话触发太频繁了

// 防抖写法，设置定时器，丢弃原先触发，只执行最后一次触发，使触发不这么频繁。重点在于最后一次
const debounce = (handler, delay) => {    // 设置只在触发后delay时间内没有再次触发该事件才执行handler
  let timer = null;    // 保存一个计时器
  return event => {
    clearTimeout(timer);      //如果再次触发，先取消上次的计时器
    timer = setTimeout(_ => handler(event), delay);
  }
}
EventUtil.register(window, "scroll", debounce(handler, 2000));

函数节流Throttle

// 所有的触发中，从计时器开始一定时间后（内）才执行一次，执行后重新计时。重点在于时间段内
const throttle = (handler, delay) => {
  let startTime = new Date().getTime();
  return function () {
    const currentTime = new Date().getTime();
    if (currentTime - startTime > delay) {
      startTime = new Date().getTime();
      handler.apply(this, arguments);    //这里绑定this
    }
  }
}

可以看出，防抖和节流都会丢弃一些触发，但是有些关键触发也被丢弃了。比如在防抖中，如果该事件一直触发，可能存在回调函数永远不能被执行的情况，而在节流（上文中的那种写法）中，如果过delay设置的2s，当我在1s的时间内不停触发，而2s后再也不触发，也会造成回调函数从不调用的情况。所以需要将防抖和节流相结合，拦截关键触发点，调用回调函数。

函数防抖和节流组合

const DebounceThrottle = (handler, delay) => {
  let startTime = new Date().getTime();
  let timer = null;
  return function () {
    let currentTime = new Date().getTime();
    if (currentTime - startTime > delay) {    // 节流 (如果时间段到了，则执行回调)
      clearTimeout(timer);
      startTime = new Date().getTime();
      handler.apply(this, arguments);
    } else {    // 防抖 (时间端没有到，记录最后一次，delay后调用回调)
      clearTimeout(timer);
      timer = setTimeout(_ => {
        startTime = new Date().getTime();
        handler.apply(this, arguments);
      }, delay);
    }
  }
}