Блог

Я хочу добавить удаление к кнопке, но я хочу выполнять некоторые действия каждый раз, когда пользователь нажимает кнопку, но только через 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 вот так:

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

Отклонение с использованием native / vanilla JS и jquery/underscore.js .

Пример

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

HTML

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

  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 
}
  

Использование глобальной переменной может быть не лучшим решением, если функция удаления используется для удаления нескольких функций. Для этого мы должны привязать таймер к запрещаемой функции.

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

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

ПРИМЕЧАНИЕ: это не будет работать с анонимной функцией;

Почему бы просто не использовать setTimeOut(function() { process(); }, 5000);