防抖函数与节流函数

发布于 / 技术教程

应用场景

实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如:

  1. 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮
  2. 通过监听 resize 事件,对某些自适应页面调整DOM的渲染(通过CSS实现的自适应不再此范围内)
  3. 通过监听 keyup 事件,监听文字输入并调用接口进行模糊匹配

防抖函数的封装

  • 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。

  • 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。

/**
 * 防抖函数
 * @param method 事件触发的操作
 * @param delay 多少毫秒内连续触发事件,不会执行
 * @returns {Function}
 */
export const debounce = (method, delay) => {
  let timer = null;
  return function() {
    let self = this,
      args = arguments;
    timer && clearTimeout(timer);
    timer = setTimeout(function() {
      method.apply(self, args);
    }, delay);
  };
};

节流函数的封装

  • 定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。

  • 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。


/** * 节流函数 * @param method 事件触发的操作 * @param mustRunDelay 间隔多少毫秒需要触发一次事件 */ export const throttle =(method, mustRunDelay) => { let timer, args = arguments, start; return function loop() { let self = this; let now = Date.now(); if (!start) { start = now; } if (timer) { clearTimeout(timer); } if (now - start >= mustRunDelay) { method.apply(self, args); start = now; } else { timer = setTimeout(function() { loop.apply(self, args); }, 50); } }; };
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/fangdouhanshuyujieliuhanshu.html