防抖节流原理，区别及应用，并用JavaScript进行实现（-节流篇）

大莹子59

于 2021-02-21 17:40:05 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45519244/article/details/113886280

本文介绍了JavaScript中实现函数节流的两种常见方法：时间戳和定时器。节流技术常用于限制函数在特定时间间隔内的执行次数，例如在拖拽和浏览器窗口缩放等场景。时间戳实现通过比较当前时间与上一次执行的时间来决定是否执行函数；定时器实现则通过设置定时器，若定时器未清除则不执行，确保了间隔时间的执行间隔。这两种方法有助于提高应用性能，避免因高频事件触发导致的资源浪费。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节流

原理：规定在一个单时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
适用场景：
。拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
。缩放场景：监控浏览器resize
使用时间戳实现
。使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳（最开始设置为0）如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

function throttle(func, wait) {
  let context, args;
  let previous = 0;

  return function () {
    let now = +new Date();
    context = this;
    args = arguments;
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now;
    }
  }
}

使用定时器实现
。当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下一个定时器。

function throttle(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        func.apply(context, args)
      }, wait)
    }

  }
}