爲什麼計時器自動啓動？

Question

我已經做了一個計時器，它開始運行，然後點擊觸發計時器的按鈕。 Fiddle。 HTML：

<div id="worked">25:00</div> 
<button type="button" onclick="update();">Start</button> 

的JavaScript：

var $worked = $("#worked"); 

function update() { 
    var myTime = $worked.html(); 
    var ss = myTime.split(":"); 
    var dt = new Date(); 
    dt.setHours(0); 
    dt.setMinutes(ss[0]); 
    dt.setSeconds(ss[1]); 

    var dt2 = new Date(dt.valueOf() - 1000); 
    var temp = dt2.toTimeString().split(" "); 
    var ts = temp[0].split(":"); 

    $worked.html(ts[1]+":"+ts[2]); 
    if (ts[1]==0 && ts[2]==0){ 
     return 0; 
    } 
    else{ 
     setTimeout(update, 1000); 
    } 
} 
setTimeout(update, 1000); 

Answer 1

這是因爲你已經給了最後聲明：

setTimeout(update, 1000); 

啓動了計時器在第二。

Answer 2

從您的代碼，調用該函數的最後setTimeout(update, 1000); 1秒後

var $worked = $("#worked"); 
 

 
function update() { 
 
    var myTime = $worked.html(); 
 
    var ss = myTime.split(":"); 
 
    var dt = new Date(); 
 
    dt.setHours(0); 
 
    dt.setMinutes(ss[0]); 
 
    dt.setSeconds(ss[1]); 
 

 
    var dt2 = new Date(dt.valueOf() - 1000); 
 
    var temp = dt2.toTimeString().split(" "); 
 
    var ts = temp[0].split(":"); 
 

 
    $worked.html(ts[1] + ":" + ts[2]); 
 
    if (ts[1] == 0 && ts[2] == 0) { 
 
    return 0; 
 
    } else { 
 
    setTimeout(update, 1000); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="worked">25:00</div> 
 
<button type="button" onclick="update();">Start</button>

Answer 3

它開始，因爲要調用的更新功能，不管你按一下按鈕

Answer 4

這是因爲你的函數定義後setTimeout(update, 1000);額外的呼叫。這被當它是由瀏覽器遇到的，因爲它不屬於一個功能，刪除它，它不會自動開始執行。還一個建議是將其添加爲好：

$(document).ready(function() { $("button").click(update); }); 

而且從刪除onclick="javascript:update();"您HTML。

這是修正的最終代碼將如何看起來像：

var $worked = $("#worked"); 
 

 
    function update() { 
 
     var myTime = $worked.html(); 
 
     var ss = myTime.split(":"); 
 
     var dt = new Date(); 
 
     dt.setHours(0); 
 
     dt.setMinutes(ss[0]); 
 
     dt.setSeconds(ss[1]); 
 
     
 
     var dt2 = new Date(dt.valueOf() - 1000); 
 
     var temp = dt2.toTimeString().split(" "); 
 
     var ts = temp[0].split(":"); 
 
     
 
     $worked.html(ts[1]+":"+ts[2]); 
 
     if (ts[1]==0 && ts[2]==0){ 
 
      return 0; 
 
     } 
 
     else{ 
 
      setTimeout(update, 1000); 
 
     } 
 
    } 
 

 

 
$(document).ready(function() { $("button").click(update); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="worked">25:00</div> 
 
<button type="button">Start</button>

更新：只是爲了解釋爲什麼通過JavaScript綁定click事件比在HTML中使用onclick更好，請參閱：jQuery.click() vs onClick

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.