防抖和节流

JavaScript

 2024/03/23 

防抖

返回一个函数，防止函数在短时间内多次触发，只有在最后一次触发后才执行。

const debounce = (fn, delay = 2000, immediate = true) => {
  let timer = null;
  return function (...args) {
    if (immediate) {
      if (!timer) {
        fn.apply(this, args);
      } else {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      return;
    }
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

节流

返回一个函数，防止函数在短时间内多次触发，在规定时间内只会执行一次。

const throttle = (fn, delay = 2000) => {
  let timer = null;
  return function (...args) {
    if (!timer) {
      fn.apply(this, args);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
};

原文作者：Yizhou Shen

原文链接：http://shenyizhou.github.io/2024/03/23/2024-03-23-%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81/

发表日期：March 23rd 2024, 3:19:46 pm

更新日期：March 23rd 2024, 8:52:19 pm

Next Post

时间函数处理
Previous Post

字符串格式数字的乘法

CATALOG

1. 防抖
2. 节流