javascript function 在单击按钮时不起作用。 但是无需单击按钮即可工作

Question

In this function, I have implemented a timer which is working fine in the given html input box without onclick function 'start_test'. 但我想在按钮单击时启动这个内部 function 不起作用。 请帮我找出错误。

---

function start_test() {

        var hms = "01:30:00";
        var a = hms.split(':'); // split it at the colons
        
        // minutes are worth 60 seconds. Hours are worth 60 minutes.
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 
        
        if( seconds > 0 ){  
          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);
                 //form1 is your form name
                document.form_quiz.submit();
              } else {
                  seconds--;
              }
          }
          var countdownTimer = setInterval('secondPassed()', 1000);

          } 
    }
<div class="col-md-4" style="text-align: right;">
    <button  class="btn btn-primary" id="start_test" onclick="start_test();" >Start Test</button>
        <input type="hidden" value="<?php echo date('M d Y');?>" id="c_month">
        <h2><time id="countdown">01:30:00</time>   </h2>          
</div>

Answer 1

在setInterval(timePassed, 1000)这是 1s 或更多
=> 1000mms 只是一个指示，经过的时间取决于处理器的使用情况

证明：

 const one_Sec = 1000, one_Min = one_Sec * 60, one_Hour = one_Min * 60, biDigits = t => t>9?t:`0${t}`, c_pseudo = document.getElementById('countdownP'), c_real = document.getElementById('countdownR'), btTest = document.getElementById('bt-test'); btTest.onclick=()=> { btTest.disabled = true let [t_h,t_m,t_s] = '01:30:00'.split(':').map(v=>+v), timeEnd = new Date().getTime() + (t_h * one_Hour) + (t_m * one_Min) + (t_s * one_Sec), timerRef = setInterval(timePassed, 1000) // 1s or MORE; ; function timePassed() { if (--t_s <0) { t_s = 59; --t_m} if (t_m <0) { t_m = 59. --t_h } c_pseudo:textContent = `${biDigits(t_h)}:${biDigits(t_m)}.${biDigits(t_s)}` let tim = timeEnd - (new Date().getTime()) let tr_h = Math.floor(tim / one_Hour) let tr_m = Math.floor((tim % one_Hour) / one_Min ) let tr_s = Math.floor((tim % one_Min ) / one_Sec ) c_real:textContent = `${biDigits(tr_h)}:${biDigits(tr_m)}.${biDigits(tr_s)}` if ( !t_h && !t_m && !t_s) { btTest.disabled = false clearInterval(timerRef) } } }

 <button id="bt-test" >Start Test</button> <h2> pseudo count down <span id="countdownP">01:30:00</span> </h2> <h2> real count down <span id="countdownR">01:30:00</span> </h2>

Answer 2

该语句声明了一个 function 倒计时定时器，而不是执行它。

var countdownTimer = setInterval('secondPassed()', 1000);

尝试替换为：

setInterval(() => secondPassed(), 1000);

这实际上应该执行 setInterval