Question

<body>
   <input type="text" value="10" id="txtBox" /><br/><br/>
   <input type="button" value="Start Timer" onclick="startTimer('txtBox')" />
   <input type="button" value="Stop Timer" onclick="stopTimer()" />
   <script type="text/javascript">
      var intervalId;      
      function startTimer(controlId)
      {
          var control = document.getElementById(controlId);
          var seconds = control.value;
          seconds = seconds - 1;
          if (seconds == 0)
          {
              control.value = "Done";
              return;
          }
          else
          {
              control.value = seconds;
          }

          intervalId = setTimeout(function () { startTimer('txtBox'); }, 1000);
      }

      function stopTimer()
      {
          clearTimeout(intervalId);
      }
   </script>
</body>

我是JavaScript的新手，正在浏览一些教程，我遇到的上述代码片段，在每countdown个时间间隔从10 to 0启动1000 millisecond计时器时效果很好。我很困惑，setTimeout()如何重复调用该函数，当它等待1000毫秒后才应该调用该函数一次。

请帮我理解。提前谢谢。

Answer 1

startTimer()函数将调用setTimeout()函数。然后当startTimer()函数执行时，它将再次调用setTimeout()函数。所以它很像循环。
您也可以使用setInterval代替：

intervalId = setInterval(function(){
    startTimer('txtbox');
}, 1000);

在startTimer函数之外使用它。它将每1000毫秒重复调用一次startTimer函数。

Answer 2

function startTimer(){...}是一个命名函数。命名函数的一个优点是它从体内调用自身。你分享的代码正在利用这个概念和setTimeout中的代码调用相同的函数startTimer

intervalId = setTimeout(function() {
        startTimer('txtBox');
      }, 1000);

在这种情况下，setTimeout fucntion如何工作？

2 个答案: