javascript - 创建一系列定时表单提交

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