防抖 (Debounce) 和节流 (Throttle) 的简单实现

小天才程序员

已于 2022-11-01 16:09:40 修改

阅读量776

点赞数

分类专栏： JavaScript 文章标签：防抖节流 Debounce Throttle immediate

于 2021-08-18 18:07:31 首次发布

本文链接：https://blog.csdn.net/qq_40738077/article/details/119780133

版权

JavaScript 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript中两种重要的性能优化技术——防抖(debounce)和节流(throttle)。防抖用于限制函数的执行次数，在用户停止输入后执行，适用于关键词联想等场景；节流则确保在设定的时间间隔内只执行一次，适用于如页面滚动、按钮点击等高频事件。文章通过代码示例展示了两种方法的实现，包括计时器和时间戳两种方式，并探讨了它们的应用场景和区别。

摘要由CSDN通过智能技术生成

📖 文章导航

防抖和节流 都是用来处理高频发事件的。
防抖: 高频触发只会在最后执行一次
节流: 高频触发只会间隔固定的时间执行一次

防抖 Debounce

实现思路
防抖函数就是一个延迟执行的函数，时间间隔内每次触发防抖都会重新计时。

应用场景
用户输入操作，根据用户输入的关键词获取联想词。如果不做防抖，用户每输入一个字符就会触发关键词联想查询，性能和体验都不好。
防抖可以实现在用户停止输入或间隔输入时再触发联想操作。

🔖 debounce.html

<body>
  <input id="input" oninput="handleInput(event)" />
  <div id="inputValue"></div>
</body>

🔖 debounce.js

/**
 * @description: debounce
 * @param {Function} func 需要防抖的函数
 * @param {Number} wait 防抖时间
 * @param {Boolean} immediate 是否开启立即执行
 * @return {Function} debounced function
 */
const debounceFunc = (func = () => {}, wait = 500, immediate = false) => {
  let timer = null
  return (args) => {
    // 立即执行 - 在第一次执行的时候, timer = null
    immediate && !timer && func(args);

    timer && clearTimeout(timer); //清除上次计时
    timer = setTimeout((args) => {
      func(args);
      //执行完毕之后, 将 timer 置为 null, 如果开启立即执行, 下次就会立即执行
      timer = null; 
    }, wait, args);//重新计时
  }
}

immediate

防抖函数可以提供 immediate 参数实现立即执行。
实现在首次或者间隔较长的时间后的首次触发时立即执行 1 次

节流 Throttle

实现思路
思路其实比节流要简单：节流函数就相当于是一个间隔一段时间就执行一次的函数，只要这个时间间隔内触发了节流函数(不管触发多少次[非0])，时间点到了就执行一次。可以稀释高频事件的触发频率。

有助于理解的例子：就像是每 10 分钟一趟班车，时间到了车上有人就出发，没有人就不再出发，直到有人再重新触发计时。

🔖 throttle.html

<body>
  <button onclick='handleClick(event)'>节流</button>
</body>

1. 计时器方式实现

🔖 throttle.js

/**
 * @description: throttle
 * @param {Function} func 需要节流的函数
 * @param {Number} wait 节流时间间隔
 * @return {Function} throttled function
 */
const throttleFunc = (func = () => {}, wait = 500) => {
  let running = false
  return (args) => {
    if (running) return
    running = true;
    setTimeout(() => {
      func(args)
      running = false;
    }, wait);
  }
}

const handleClick = throttleFunc(() => {
  console.log('Trigger Click')
}, 3000);

2. 时间戳方式实现

/**
  * @description: 节流 - 时间戳实现方式
  * @param {Function} func 需要节流的函数
  * @param {Number} wait 节流时间间隔
  * @return {Function} throttle function
  */
const throttleFuncTimestamp = (func = () => {}, wait = 500) => {
  let lastStartTime = Date.now()
  return (args) => {
    let thisStartTime = Date.now()
    if (Date.now() - lastStartTime < wait) return
    lastStartTime = thisStartTime
    func(args);
  }
}

const handleClick = throttleFuncTimestamp(() => {
  console.log('Trigger Click')
}, 3000);