Ändern von HTML-Eingang ist vermasselt mein JS setInterval() Timing

Arbeits JSBin: https://jsbin.com/nijozefoma/Ändern von HTML-Eingang ist vermasselt mein JS setInterval() Timing

Ich habe eine Seite mit einem setInterval() Feld und ein Eingabefeld. Um das Problem zu duplizieren, versuchen Sie, den folgenden Code zu laden, geben Sie 4.5 statt 0 in das Feld ein, und klicken Sie auf den folgenden Text. Dann ändere es auf 9.5. Der Text sollte alle 1 Sekunde hochzählen, aber aus irgendeinem Grund geht es für mich viel schneller.

Gedanken?

<head> 

<!-- CSS inclusion --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

</head> 
<body> 
Input Box: <input type="number" class="timeSelect workSelect" value=0 /> 
<div class="startButton"> 
    Change the input to 4.5, and click this text. Then change to 9.5, and click again. 
</div> 
<div class="secondCounter"> 
</div> 
<!-- Javascript Inclusion --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script type="text/javascript"> 

var secondsPassed; 
function startTime(){ 
    secondsPassed = 0 ; 
    $(".secondCounter").html("secondsPassed is "+ secondsPassed); 
} 
function updateTime(){ 
    secondsPassed ++; 
    $(".secondCounter").html("secondsPassed is "+ secondsPassed); 
} 

$(".startButton").click(function(){ 
    startTime(); 
    setInterval(updateTime, 1000); 
}) 

</script> 

</body>

Quelle

2016-06-30 garson

$(".startButton").click(function(){ 
    startTime(); 
    setInterval(updateTime, 1000); 
})

Jedes Mal, wenn die startButton Sie ein anderes Intervall beginnen getroffen, was bedeutet, dass updateTime dann zweimal ausgeführt wird.

Entweder das alte Intervall abbrechen oder den Code aktualisieren, damit setInterval nicht zweimal gestartet wird.

Quelle

2016-06-30 19:09:09

Wie üblich, die Frage schriftlich bis auf SO ich die Antwort herauszufinden geholfen, und ich war gerade dabei, diese zu löschen, wenn ich sah, Ihre (richtige) Antwort. Vielen Dank! – garson

Sie benötigen Timer jedes Mal löschen

<script type="text/javascript"> 

var timer, 
    secondsPassed; 

function startTime(){ 
    secondsPassed = 0 ; 
    $(".secondCounter").html("secondsPassed is "+ secondsPassed); 
} 

function updateTime(){ 
    secondsPassed ++; 
    $(".secondCounter").html("secondsPassed is "+ secondsPassed); 
} 

$(".startButton").click(function(){ 
    startTime(); 
    if(timer) clearInterval(timer); 
    timer = setInterval(updateTime, 1000); 
}) 

</script>

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

Quelle

2016-06-30 19:11:02 denov

Es sollte wahrscheinlich ['clearInterval'] (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) anstelle von' clearTimeout' und 'if (timer)' sein äquivalent zu 'if (timer! = null)' –

yeah .. guten Ruf! Aktualisierung jetzt. – denov

Ich hatte die (Timer! = Null) um zu versuchen, es klarer zu machen. wie das eine einfache Frage war. du könntest auch schreiben wie !! timer && clearInterval (timer);) – denov

Ändern von HTML-Eingang ist vermasselt mein JS setInterval() Timing

Antwort

Verwandte Themen