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

回答

相关问题