防抖函数与节流函数

w候人兮猗

发布于 2020-07-01 16:41:03

3360

发布于 2020-07-01 16:41:03

文章被收录于专栏：w候人兮猗的博客 w候人兮猗的博客w候人兮猗的博客

Contents

1 应用场景
2 防抖函数的封装
3 节流函数的封装

应用场景

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

通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮
通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）
通过监听 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);
    }
  };
};

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018年11月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

dom