SetTimeout wird nur einmal beim Mousedown ausgeführt

Question

Alles, was ich versuche ist, eine Zahl zu erhöhen, die in einer Box mit 1 angezeigt wird, und dies alle 100 ms zu tun, solange die Maus gedrückt ist. Die Funktion wird ausgeführt, aber niemals mehr als einmal, egal wie lange die Maus gedrückt gehalten wird. Es erhöht die Variable nur jedesmal um 1, wenn ein mousedown -Ereignis für dieses Element vorliegt, und ich kann das in der Box sehen, während ich sehen wollte, dass die Zahl schnell ansteigt, solange die Maus unten bleibt. Gibt es Code für das MouseUp-Ereignis, das das MouseDown-Ereignis daran hindern würde, die Funktion in setTimeout weiter auszuführen oder gibt es eine Regel, die ich vermisse? Seltsam.

var mouseDownCount = 0; 

$("#addButton").mousedown(function() { startMouseCount(); }); 

function startMouseCount() { 
    $("mouseCount").html(mousedownCount) 

    mdcTimer = window.setTimeout(function() { 
    mousedownCount++; 
    $("#mouseCount").html(mousedownCount); 
    }, 100); 

    return false; 
} 

Answer 1

Ich denke, Sie dies wünschen können:

var mouseDownCount = 0; 
 
var mdcTimer; 
 

 
$("#addButton").mousedown(startMouseCount); 
 
$("#addButton").mouseup(stopMouseCount); 
 

 
function startMouseCount() { 
 
    mdcTimer = window.setTimeout(function() { 
 
     mouseDownCount++; 
 
     $("#mouseCount").html(mouseDownCount); 
 
     startMouseCount(); 
 
    }, 100); 
 
} 
 
function stopMouseCount() { 
 
    clearTimeout(mdcTimer); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<button id="addButton">button</button> 
 
<h2 id="mouseCount"></h2>

Answer 2

Sie haben eine Reihe von Problemen mit Ihrem Code:

• Du mousedownCount mehrmals referenzieren, wenn Ihre Variable mouseDownCount ist. Die Konsistenz der Fälle ist wichtig.
• Sie vermissten die ID-Referenz in $("mouseCount") (es sollte $("#mouseCount") sein).

Zusätzlich dazu, suchen Sie nach setInterval() statt setTimeOut(), wie setInterval() wird mehrfach auslösen, während setTimeOut() nur einmal ausgelöst wird.

Beachten Sie, dass Sie wahrscheinlich auch den Timer von der Zählung auf unbestimmter Zeit zu stoppen wollen, die auf mouseUp getan werden können:

Hier ist ein funktionierendes Beispiel:

var mouseDownCount = 0; 
 

 
$("#addButton").mousedown(function() { 
 
    startMouseCount(); 
 
}); 
 

 
$("#addButton").mouseup(function() { 
 
    endMouseCount(); 
 
}); 
 

 
function startMouseCount() { 
 
    $("#mouseCount").html(mouseDownCount) 
 
    mdcTimer = window.setInterval(function() { 
 
    mouseDownCount++; 
 
    $("#mouseCount").html(mouseDownCount); 
 
    }, 100); 
 
    return false; 
 
} 
 

 
function endMouseCount() { 
 
    clearInterval(mdcTimer); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="addButton">Down</button> 
 
<div id="mouseCount"></div>

Hoffe, das hilft! :)