js 中 throttle 的实现

最新推荐文章于 2025-06-05 11:46:42 发布

原创最新推荐文章于 2025-06-05 11:46:42 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#timer #function

JS 专栏收录该内容

152 篇文章

订阅专栏

本文介绍了一种防止按钮被频繁点击的技术方案，通过设置阈值来判断是否触发按钮事件，有效避免了因用户快速多次点击而引起的不必要的后台处理。

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

在用户对按钮频繁的点击时，为了避免按钮事件频繁响应，一般采用的方法是：如果两次操作的时间间隔大于阈值，则响应，反之，则不响应

以下是thottle 的一种实现方式

function throttle(fn,ms){

    ms = ms || 200;
    var th_timer;
    function f(){
          f.stop();
          th_timer = setTimeout(fn,ms);
    }
    f.stop = function(){
        if(th_timer){
             clearTimeout(th_timer);
             th_timer = 0;
        }
    }
     return f;

}

上例参考arala开源项目

同时可以参考github的一个开源项目：

https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.js