创建一系列定时表单提交

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 显示了解决方案。

创建一系列定时表单提交

Creating a series of timed form submissions

javascript

forms

jquery