Javascript倒计时表单提交不起作用答案

【问题标题】：Javascript countdown form submit not workingJavascript倒计时表单提交不起作用
【发布时间】：2017-10-10 08:44:42
【问题描述】：

所以我试图编写一些javascript来倒计时，然后在倒计时完成时提交表单。这是我在网上找到并尝试实现的JS：

 var seconds = 300;

 function secondPassed() {
   var minutes = Math.round((seconds - 30) / 60),
     remainingSeconds = seconds % 60;

   if (remainingSeconds < 10) {
     remainingSeconds = "0" + remainingSeconds;
   }

   document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
   if (seconds == 0) {
     clearInterval(countdownTimer);
     document.qForm.submit();
   } else {
     seconds--;
   }
 }
 var countdownTimer = setInterval('secondPassed()', 1000);

这里是这样实现的： https://jsfiddle.net/spadez/9p9o4k6s/1/

错误提示：secondPassed 未定义，但我不确定为什么会这样。谁能解释我哪里出错了？

【问题讨论】：

改成setInterval(secondPassed, 1000); 详情请见setInterval Documentation
我知道How do I correctly use setInterval and clearInterval to switch between two different functions? 的这个可能重复项要求的不仅仅是清除和设置间隔，而是通过不将函数引用指定为字符串来显示如何正确使用它。

标签： javascript

【解决方案1】：

对我来说，调用setInterval 的两种方式都适用于 SO sn-p。我认为错误可能是 jsfiddle 特定的，因为它似乎只接受setInterval 的第一种形式，它需要函数和间隔，而不是执行和延迟的代码字符串（https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval）。如果您想继续使用小提琴，您必须将最后一行更改为：

var countdownTimer = setInterval(secondPassed, 1000);

         var seconds = 300;

         function secondPassed() {
           var minutes = Math.round((seconds - 30) / 60),
             remainingSeconds = seconds % 60;

           if (remainingSeconds < 10) {
             remainingSeconds = "0" + remainingSeconds;
           }

           document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
           if (seconds == 0) {
             clearInterval(countdownTimer);
             document.qForm.submit();
           } else {
             seconds--;
           }
         }
         var countdownTimer = setInterval('secondPassed()', 1000);

body {
  background-color: #eee;
}

canvas {}

time {color: red; float: right;}

.active {color: green; font-size: 12px; font-weight: bold;}

  <h3>Question 1 of 20<time id="countdown">5:00</time></h3>
  <form name="qForm">
    <input type="radio"> 219
    <input type="submit" value="Submit">
  </form>

【讨论】：

【解决方案2】：

您的代码的最后一行有错误。把那行改成这个'

var countdownTimer = setInterval(secondPassed, 1000);

这是更新的小提琴。 https://jsfiddle.net/9p9o4k6s/3/

【讨论】：

请参阅developer.mozilla.org/en-US/docs/Web/API/…。那里没有错误，setInterval 可以将字符串中的代码作为第一个参数

【解决方案3】：

当您像这样将函数调用作为字符串传递给setInterval 时，您调用的函数必须在全局范围内。您的函数 secondPassed 被 jsFiddle onload 包装器包装，因此它不在全局范围内。

为了证明这一点，如果您使用window.secondPassed = secondPassed; 将其置于全局范围内，您现有的代码将可以工作。

正确的解决方案是将函数对象作为参数而不是字符串传递：

var countdownTimer = setInterval(secondPassed, 1000);

注意，以这种方式使用时没有括号()。

【讨论】：