【JavaScript】手写节流

小孩不能抽烟

已于 2022-01-18 23:05:58 修改

阅读量148

点赞数

分类专栏：前端文章标签： javascript 前端

于 2022-01-18 23:04:57 首次发布

原文链接：https://github.com/mqyqingfeng/Blog/issues/26

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个函数节流(throttle)的JavaScript实现方法。该方法通过设定等待时间来限制函数的执行频率，确保即使用户频繁触发操作，函数也不会过于密集地执行。文章详细解释了节流函数的工作原理，并提供了具体的代码实现。

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

function throttle3(func, wait) {
  var args, context;
  var previous = 0;
  var timeout;

  var latter = function () {
    previous = +new Date()
    timeout = null
    func.apply(context, args)
  }


  var throttled = function () {
    var now = +new Date()
    // 下次触发 func 剩余的时间
    var remaining = wait - (now - previous)
    context = this
    args = arguments
    // 如果更改了系统时间，或者没有剩余时间了
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      previous = now;
      func.apply(context, args)
    } else if (!timeout) {
      timeout = setTimeout(latter, wait)
    }
  }

  throttled.cancel = function () {
    clearTimeout(timeout);
    previous = 0;
    timeout = null;
  }
  return throttled
}