Question

我有兴趣设计一个定时测验问题，这些问题会在30秒左右后自行提交。关注其他SO request我编写了以下代码：

<script> 
var counter = 30;
var interval = setInterval(function() {
    counter--;
    // Display 'counter' wherever you want to display it.
    document.getElementById("counter").innerHTML = "Timer:"+counter
    if (counter == 0) {
    // Submit form  
    test.submit('timeout');
    }
}, 1000);
</script>

<p id="counter"></p>

这似乎适用于大多数现代浏览器。然而，有一个问题，这似乎适用于第一个问题或形式。我认为第二种形式定义了一个额外的功能，使倒计时的速度提高了两倍。然后是第三个，快三倍，等等。有没有办法确保这个函数只定义一次？

感谢您提供的任何帮助。我是javascript的新手，所以如果我使用了错误的术语，我会提前道歉。

Answer 1

第一次调用setInterval()时，它会定义一个间隔，该间隔将计数器每秒递减1。一旦计数器达到0，它就不会停止;它只是每秒减少它。然后再次调用setInterval()，它每秒设置另一个相同计数器的减量。所以现在计数器每秒递减两次：一次是因为你设置的第一个间隔，另一个是因为第二个间隔。当您添加更多间隔时，效果会逐渐增加。

您可以在 fiddle 中看到效果。

解决方案是在计数器达到0之前停止间隔，然后再设置另一个间隔。此外，不需要为所有不同的时间间隔使用相同的counter变量，因此您可以在较窄的范围内每次声明一个新变量。缩小变量的范围将最大限度地降低不同代码段相互干扰的风险。

function startCountDown(){ // This counter is local to this invocation of the "startCountDown" // function. var counter = 10; var interval = setInterval(function() { counter--; // Display 'counter' wherever you want to display it. document.getElementById("counter").innerHTML = "Timer:"+counter if (counter == 0) { // Submit form console.log("Form submitted!"); // Stop this interval so that it doesn't update the // interface anymore (next interval will take care of that). clearInterval(interval); startCountDown(); } }, 1000); } startCountDown();

其他 fiddle 显示了解决方案。

创建一系列定时表单提交

1 个答案: