JavaScript setInterval 问题答案

【问题标题】：JavaScript setInterval issueJavaScript setInterval 问题
【发布时间】：2015-03-07 06:28:09
【问题描述】：

我正在尝试创建一个秒表，它将从输入框中获取分钟，然后将其转换为秒。我将秒数一一递减，我正在使用“设置间隔”方法来做到这一点。但它不会工作。这是我的 JavaScript 文件的样子：

window.onload = function(){
    //creating the inputminutes text Box
    var inputMin = document.createElement("input");
    inputMin.setAttribute('id','inputMin');
    inputMin.setAttribute('type','text');
    //creating the submit button
    var btn = document.createElement('input');
    btn.setAttribute('type','submit');
    btn.setAttribute('id','submit');
    btn.setAttribute('value','Start');

    document.getElementById('form').appendChild(inputMin);
    document.getElementById('form').appendChild(btn);


    document.getElementById('form').onsubmit = function() {     
        function countDown(){
            var minutes = document.getElementById('inputMin').value;
            if(isNaN(minutes)) {
                alert("Please Enter a number...");
                return;
            }
            var seconds = parseFloat(minutes * 60);
            seconds--;
            return seconds;
        }
        var tick = setInterval(countDown(),2000);

        document.getElementById('time').innerHTML = tick.toString();
    }   
}

这就是我的 html 的样子：

<html>
<head>
<title></title>
    <style>
        body{
            margin:auto;
            width:500px;
        }
        h2{
            font-size: 40px;
            font-family: Arial;
        }
    </style>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <form id="form"></form>
    <h2 id="time">0.00</h2>
</body>

</html>

谁能告诉我如何解决这个问题？

【问题讨论】：

也许你应该......解释到底出了什么问题......除了“它不会工作”。
停止过多更改已发布的代码：SO 不应用作“实时调试器”，有更好的方法来分析问题。

标签： javascript jquery arrays performance dom-events

【解决方案1】：

您没有正确使用setInterval。 setInterval 返回间隔句柄，以便您可以使用 clearInterval 清除它。它没有从 countDown 函数返回秒数。我会将document.getElementById('time').innerHTML 移动到countDown 函数的底部，并将其直接设置在秒上。同样setInterval 将函数作为第一个参数，所以不要在末尾包含()，这实际上是在执行函数，即setInterval(countDown,2000) 我也不会在onsubmit 处理程序中声明函数，没有必要，您可能会遇到范围问题。此外，countDown 函数的开头总是在 inputMin 框的情况下获取值，所以总是重置自己，老实说，你最好将其更改为 setTimeout 并递归调用自身。此外，您需要停止发布表单，这将立即刷新页面（并且似乎什么都不做）。我可能不使用表单，因为您并不是真的希望它发布（提交），也许只是将点击处理程序连接到按钮。

所以类似下面的东西应该可以解决问题

window.onload = function () {
    //creating the inputminutes text Box
    var inputMin = document.createElement("input");
    inputMin.setAttribute('id', 'inputMin');
    inputMin.setAttribute('type', 'text');
    //creating the submit button
    var btn = document.createElement('input');
    btn.setAttribute('type', 'submit');
    btn.setAttribute('id', 'submit');
    btn.setAttribute('value', 'Start');

    document.getElementById('form').appendChild(inputMin);
    document.getElementById('form').appendChild(btn);


    document.getElementById('form').onsubmit = function (e) {
        //Start the countDown with the value from the box, as seconds
        setTimeout(function(){countDown(document.getElementById('inputMin').value * 60)}, 2000);
        return false; //Need to also stop the post of the form

    }
}
function countDown(seconds) {    
    if (isNaN(seconds)) {
        alert("Please Enter a number...");        
    }
    else
    {
        seconds--;
        document.getElementById('time').innerHTML = seconds;
        if (seconds > 0) {
            setTimeout(function () { countDown(seconds); }, 2000);
        }
    }  

}

【讨论】：

刚刚做了一个编辑，发现你的代码还有很多逻辑问题

【解决方案2】：

我想出了如何解决它......使用这个java脚本解决方案......

<div id="time">ddd</div>
<script> 
 var seconds=0
 var minutes=1 
 time.innerHTML = "My new text!";
function display(){ 
 if (seconds<=0){ 
    seconds=59 
    minutes-=1 
 } 
 if (minutes<=-1){ 
    seconds=0 
    minutes+=1 
 } 
 else 
    seconds-=1 
    time.innerHTML = minutes+"."+seconds ;
    setTimeout("display()",1000) 
} 
display() 

</script>

【讨论】：