Run mousedown-Ereignis alle 0,2 s, bis Maus hoch

Question

Ich versuche, +1 zu dem Wert eines Texteingabefeldes hinzuzufügen, wenn der Benutzer auf eine Schaltfläche klickt.

Simplified, mein JQuery-Code ist so etwas:

$('#button').on({ 
mousedown : function() { 
var value = $(this).val(); 
$(this).val(value + 1); 
}, 
mouseup : function() { 
//Some other stuff here 
} 
}); 

Dies funktioniert jedes Mal, wenn der Benutzer auf die Schaltfläche klickt. Was ich will, ist, wenn der Benutzer die Taste gedrückt hält, das mousedown Ereignis alle 0,2 Sekunden zu feuern, bis er aufhört zu drücken (und dann das mouseup Ereignis feuert).

Ich denke, das sollte irgendwie mit setTimeout() gemacht werden, aber ich würde mich freuen, wenn mir jemand wie gezeigt würde. Vielen Dank.

Answer 1

Verwenden setInterval und clearInterval:

var interval; 
$('#button').on({ 
    mousedown : function() { 
    var el = $(this); 
    el.val(parseInt(el.val(), 10) + 1); 
    interval = window.setInterval(function(){ 
     el.val(parseInt(el.val(), 10) + 1); 
    }, 200); 
    }, 
    mouseup : function() { 
    window.clearInterval(interval); 
    } 
}); 

Allerdings ist es nicht möglich, so oft wie alle 0,2 ms zu laufen, nehme ich an, dass Sie alle 0,2 Sekunden bedeuten ...

Answer 2

Sie können setInterval verwenden, um wiederholen Sie die Veranstaltung nach dem mousedown- Code

var int = null; 
$("#button").mousedown(function() { 
    // Start the timer on mousedown 
    int = setInterval(function() { 
    $("#button").val($("#button").val() + 1); 
    }, 2); 
}).mouseup(function() { 
    // Stop the timer after mouse up 
    clearInterval(int); 
    int = null; 
    // Other code 
}); 

Answer 3

du so erreichen können:

$('#button').on({ 
    mousedown: function() { 
     $(this).data('clicked', true); 
     var self = this; 
     var process = function() { 
      if ($(self).data('clicked')) { 
       console.log("process..."); 
       setTimeout(process, 200); 
      } 
     }; 
     process(); 
    }, 
    mouseup: function() { 
     $(this).data('clicked', false); 
    } 
});