javascript / jquery - ajouter le rebond à un bouton

Je veux ajouter un anti-rebond à un bouton, mais je veux effectuer certaines actions à chaque fois que l'utilisateur clique sur le bouton, mais seulement au bout de 5 seconde après l'utilisateur appuie sur le bouton, puis effectuer la mise à jour SQL. Généralement, le gaz semble être appliqués directement à l'auditeur. Je veux ici certaines actions exécutées chaque fois que le bouton est cliqué, puis une mise à jour après un délai raisonnable.

Je ne suis pas sûr de savoir comment utiliser la fonction dans ce cas...

référence: 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
}

antirebond syntaxe

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

source d'informationauteur george

  1. 21

    Vous pouvez toujours utiliser $.debounce comme suit:

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

    Alternative sans $.debounce (vous pouvez toujours antirebond votre code de cette façon, sans 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);
     });
}());
  2. 10

    Anti-rebond en utilisant natif/vanille et JS jquery/underscore.js.

    Exemple

    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>
  3. 4
     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. -2

    Pourquoi ne pas simplement utiliser setTimeOut(function() { process(); }, 5000);