Question

我想在纽伦加一字,但希望每当用户点击纽顿时就采取某些行动,但只是在用户点击后5次之后,才进行更新。通常看来,神学直接适用于听众。在此,我要求每点子被点击时采取一些行动,然后在一段合理的等候期之后更新。

I am not sure how to use the function in this case...

参考:。

$( #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
}

debounce syntax

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

Answer 1

You could still use $.debounce like so:

// 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();
     });
}());

不含<代码>的备选案文 (你可以永远以这种方式篡改你的法典,不 j笑):

// 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);
     });
}());

Answer 2

Debounce using home/vanilla JS and jquery/underscore.js.

Example

<>JS

//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));

<><><><>>><>>>>><>>>>>>

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

Answer 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 
}

Answer 4

Using a global variable might not be the best solution if the debounce function is used to debounce multiple functions. For that we should scope the timer to the function being denounced.

function debounce(func, timeout = 2000) {
  if (func.timer) clearTimeout(func.timer);
  func.timer = setTimeout(func, timeout);
}

debounce(func1, 4000);
debounce(func2, 1000);

NOTE: this won t work with an anonymous function;

debounce syntax

Example

友情链接