setTimeout in javascript to print

我已經開始學習JavaScript了，我想嘗試一個簡單的倒數計時器，但我無法弄清楚。setTimeout in javascript to print

function countdown() { 
 
    var count1 = 10; 
 
    while (count1 >= 0) { 
 
    setTimeout(function() { 
 
     document.getElementById("main").innerHTML = count1; 
 
    }, 1000); 
 
    count1--; 
 
    } 
 
}

<p id="main" onload="countdown()"></p>

頁面只是停止/掛起。它有什麼問題？

來源

2017-02-14 ssh

使用'的setInterval（函數（）{...}）'這個 –

我不認爲'onLoad'了'p'元素上會做任何事情。我不認爲你的頁面正在停止或掛起;它沒有做任何事情開始。嘗試添加'document.addEventListener（'DOMContentLoaded'，countdown）;'，然後您可以調試其餘的邏輯。 – 2017-02-14 06:51:45

[簡單的JavaScript倒數計時器的代碼？]的可能的重複？（http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer） –

對定時器使用setInterval，然後在倒數到達0時將其清除。確保使用立即調用的匿名函數或在定義後立即執行指定的函數。你的功能不會執行，否則沒有計時器。

function countdown() { 
 
    var count1 = 10; 
 
    var myTimer = setInterval(function() { 
 
    document.getElementById("main").innerHTML = count1; 
 
    count1--; 
 
    if (count1 == 0) { 
 
     clearInterval(myTimer); 
 
    } 
 
    }, 1000); 
 
} 
 
countdown();

<div id="main"></div>

來源

2017-02-14 06:23:33 Merigold

您可能想要改善代碼就像現在這樣，它不會比問題中的原始代碼更好。 –

你真的認爲這有效嗎？ – 2017-02-14 06:53:42

那裏，現在工作 – Merigold

您應該使用setInterval代替，因此它被調用regulary和倒計時（decreading計數器）由setInterval調用的函數內應該發生。您可以省略循環，然後在計數器達到0時調用clearInterval。

來源

2017-02-14 06:24:43

setTimeout只執行一次該功能。使用setInterval可以在這裏幫助。

但是需要注意的另一點是關於變量的範圍。當setTimeOut等待1秒時，while循環將繼續執行，更改count1的值。

count1的值將始終爲-1。使用立即調用的函數表達式（IIFE）是需要的。

function countdown() 
{ 
    var count1 = 10; 
    while(count1 >= 0) { 
     var myTimer = setInterval((function() { 
     console.log(count1); 
     }(count1)), 1000); 
     count1 = count1 - 1; 
    } 
} 
countdown()

Jsfiddle

來源

2017-02-14 06:24:57 Hozefa

你應該重新檢查你的代碼 - 它絕對不會做OP想要的，考慮到它立即在while循環中調用所有10個'setInterval's。 – user3707125

@Hozefa感謝您的解釋，但代碼是錯誤的。 – ssh

@psh哦，是的，有一個錯誤。但我希望能夠理解這個概念 – Hozefa

setTimeout in javascript to print

回答

相關問題