2017-01-10 3 views
1

Sie können sehen, dass ich eine Stopp-Taste habe, aber der Code ist nicht korrekt, da das Skript nicht aufhören wird, wenn ich diese Taste drücke, also wie kann ich es tun? Und ist es möglich, dass wenn ich Stop drücke stoppt es, wenn ich Stop drücke, und es fängt an, wo es wieder aufhörte, wenn ich den Startknopf wieder drücke?So stoppen Sie die Zeit aktivierte Funktionen

<!DOCTYPE html> 
<html> 

<head> 
    <link href="style2.css" type="text/css" rel="stylesheet"> 
</head> 

<body> 

    <button onclick="timedText()">Start</button> 

    <button onclick="clearTimeout(timeout)">Stop</button> 


    <div id="leser"> 
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe> 
    </div> 

    <div id="leser2"> 
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe> 
    </div> 

    <script> 
    var timeout; 
    function timedText() { 
     timeout = setTimeout(myTimeout1, 5000) 
     timeout = setTimeout(myTimeout2, 10000) 
     timeout = setTimeout(myTimeout3, 15000) 
} 

function stopTimeout() { 
    clearTimeout(timeout); 
} 
function myTimeout1() { 
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Flaming+Skull+Face+Bandana%22"></iframe>';; 
} 
function myTimeout2() { 
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=Skin%3A+Pinstripe+Suit+Jacket"></iframe>'; 
} 
function myTimeout3() { 
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Slacks%22"></iframe>'; 
} 
    </script> 

</body> 

</html> 
+1

[setTimeout] (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) gibt einen Verweis auf den Timer zurück, Sie können diesen in einer Variablen speichern und dann [clearTimeout()] verwenden (https: // developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout) um es zu stoppen –

+1

Ähnlich wie [clearInterval nicht funktioniert | undefined] (// stackoverflow.com/a/41498653) – Tushar

+0

@ArunPJohny Könntest du mir vielleicht ein bisschen helfen und mir ein Beispiel zeigen? Ich fürchte, ich verstehe nicht wirklich Entschuldigung, ich bin sehr neu zu diesem .. –

Antwort

0

clearInterval Aufruf erfordert ein geplantes setInterval Ergebnis zu löschen. Sie verwenden setTimeout. Der Unterschied ist, dass ein mit setInterval gesetztes Intervall wiederholt immer wieder mit der spezifischen Verzögerung aufruft, bis es gestoppt wird. setTimeout wird jedoch nur einmal genannt.

Um die Zeitüberschreitung oder das Intervall zu löschen, müssen Sie zuerst darauf zugreifen können. Dies wird erreicht, indem eine Variable auf den Rückgabewert des Timeout erfolgt, wie in:

var someTimeout = setTimeout(someFunction, 10000); 

Um dieses Timeout zu löschen, können Sie dann gehen:

clearTimeout(someTimeout); 

So müssen Sie bekommen der Rückgabewert von Ihrem setTimeout, um es später zu stoppen - was Sie tun, indem Sie den Rückgabewert an clearTimeout übergeben.

Hier ist ein voll funktionsfähiges Beispiel für den JS-Code ist erforderlich, um zu starten und ein Timeout zu stoppen:

var timeout; 
function startTimeout() { 
    // Set a timeout for 10 seconds from now and store it in `timeout`. 
    timeout = setTimeout(callbackFunc, 10000); 
} 

function stopTimeout() { 
    // Clear the timeout stored in `timeout`. 
    clearTimeout(timeout); 
} 

// This function is called when the timeout happens. 
function callbackFunc() { 
    alert("Timeout has been triggered!"); 
} 

Hier ist der Code, angepasst um korrekt zu arbeiten (obwohl ich empfehlen, herauszufinden, es selbst heraus unter Verwendung der Informationen I hab oben statt gegeben, dann ist es mehr als genug, und Sie werden tatsächlich auf diese Weise lernen.):

<!DOCTYPE html> 
<html> 

<head> 
    <link href="style2.css" type="text/css" rel="stylesheet"> 
</head> 

<body> 

    <button onclick="timedText()">Start</button> 

    <button onclick="clearInterval(setTimeout)">Stop time</button> 


    <div id="leser"> 
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe> 
    </div> 

    <div id="leser2"> 
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe> 
    </div> 

    <script> 
    var timeoutOne, timeoutTwo, timeoutThree; 
    function timedText() { 
     timeoutOne = setTimeout(myTimeout1, 5000) 
     timeoutTwo = setTimeout(myTimeout2, 10000) 
     timeoutThree = setTimeout(myTimeout3, 15000) 
} 

function stopTimeout() { 
    clearTimeout(timeoutOne); 
    clearTimeout(timeoutTwo); 
    clearTimeout(timeoutThree); 
} 
function myTimeout1() { 
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Flaming+Skull+Face+Bandana%22"></iframe>';; 
} 
function myTimeout2() { 
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=Skin%3A+Pinstripe+Suit+Jacket"></iframe>'; 
} 
function myTimeout3() { 
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Slacks%22"></iframe>'; 
} 
    </script>  
</body> 
</html> 
+0

also wie sollte der Stop-Button-Code für den Code aussehen, den Sie hier gemacht? –

+0

@MathiasHermansen Erstellen Sie eine Variable für jeden Ihrer drei 'setTimeout' Aufrufe (zum Beispiel:' var theTimeoutVariable = setTimeout (foo, 10000); ') und dann, wenn Sie sie löschen wollen,' clearTimeout (theTimeoutVariable) ' –

+0

Ich habe meinen Code jetzt aktualisiert, habe ich die Dinge richtig gemacht? Und vielen Dank, dass Sie mir hier geholfen haben! –

Verwandte Themen