javascript/jquery - 为按钮添加去抖动功能答案

【问题标题】：javascript/jquery - add debounce to a buttonjavascript/jquery - 为按钮添加去抖动功能
【发布时间】：2011-12-24 18:00:15
【问题描述】：

我想为按钮添加去抖动功能，但我想在每次用户单击按钮时执行一些操作，但仅在用户单击按钮后 5 秒后执行 SQL 更新。通常油门似乎直接应用于侦听器。在这里，我希望每次单击按钮时执行一些操作，然后在合理的等待期后进行更新。

我不确定在这种情况下如何使用该功能...

参考：http://code.google.com/p/jquery-debounce/

$('#myButton').click(function() {
    // do a date calculation
    // show user changes to screen
    // wait until user has has stopped clicking the 
             // button for 5 seconds, then update file with "process" function.

});

function process(){
    // update database table
}

去抖动语法

$('input').bind('keyup blur', $.debounce(process, 5000));

【问题讨论】：

所以您不知道$.debounce 的工作原理或您的问题是什么？ 编辑：啊，我明白了....
我添加了有关我的问题的详细信息。 debounce 和 throttling 是 ajax 中经常使用的一种模式。这里有一些不错的阅读...ajaxpatterns.org/Submission_Throttling

标签： javascript jquery throttling

【解决方案1】：

你仍然可以像这样使用$.debounce：

// create new scope
(function() {
     // create debounced function
     var dprocess = $.debounce(process, 5000);

     // bind event handler
     $('#myButton').click(function() {
         // do a date calculation
         // show user changes to screen
         // call the function
         dprocess();
     });
}());

不带$.debounce 的替代方案（你总是可以通过这种方式去抖动你的代码，不带jQuery）：

// create new scope
(function() {
     var timer;

     // bind event handler
     $('#myButton').click(function() {
         if(timer) {
             clearTimeout(timer);
         }
         // do a date calculation
         // show user changes to screen
         // call the function
         timer = setTimeout(process, 5000);
     });
}());

【讨论】：

这看起来是正确的方向。您正在围绕该过程包装一个匿名函数？ dprocess() 调用时会在作用域内吗？
你的意思是它是否可以从点击事件处理程序中访问？是的。我添加了立即函数调用，以便dprocess 不会泄漏到全局范围内。当然，如果您可以删除它，例如无论如何，您的代码都在 ready 事件处理程序中。
非常好的 jQuery-less debounce 示例。它几乎否定了对 jQuery 的需求。几乎……

【解决方案2】：

使用 native/vanilla JS 和 jquery/underscore.js 去抖动。

Example

//Native/Vanilla JS
document.getElementById('dvClickMe').onclick = debounce(function(){
    alert('clicked - native debounce'); 
}, 250);


function debounce(fun, mil){
    var timer; 
    return function(){
        clearTimeout(timer); 
        timer = setTimeout(function(){
            fun(); 
        }, mil); 
    };
}

//jQuery/Underscore.js
$('#dvClickMe2').click(_.debounce(function(){
    alert('clicked - framework debounce'); 
}, 250));

HTML

<div id='dvClickMe'>Click me fast! Native</div>
<div id='dvClickMe2'>Click me fast! jQuery + Underscore</div>

【讨论】：

【解决方案3】：

 var timer;
 $('#myButton').click(function() {
     //Called every time #myButton is clicked         
     if(timer) clearTimeout(timer);
     timer = setTimeout(process, 5000);
 });

function process(){
  //Called 5000ms after #myButton was last clicked 
}

【讨论】：

【解决方案4】：

为什么不直接使用setTimeOut(function() { process(); }, 5000);

【讨论】：

据我了解，这只会增加延迟。我想忽略初始点击，然后在用户平静几秒钟后运行更新。
很公平。您可以在没有去抖动的情况下类似地实现它，但似乎这可能是要走的路。