一個頁面上的兩個計數器

我在使用JavaScript將三個計數器放在一個頁面上很掙扎。當我運行這個頁面時，計數器出現，但它們被凍結，不刷新。這裏是我的代碼：一個頁面上的兩個計數器

<!DOCTYPE html> 
 
<head> 
 
\t <meta charset="utf-8"/> 
 
\t <title>Counters</title> 
 

 
\t <script type="text/javascript"> 
 
\t \t function zero(element) { 
 
\t \t  if (element < 10) return element = "0" + element; 
 
\t \t  return element; 
 
\t \t } 
 
\t \t 
 
\t \t function counter(day, month, id) { 
 
\t \t  var year = (new Date).getFullYear(); 
 
\t \t  var today = new Date(); 
 
\t \t  var vDate = new Date(year,month-1,day,9,00); 
 
\t \t  var ms_day = 24 * 60 * 60 * 1000; 
 
\t \t 
 
\t \t  var diff = (vDate.getTime() - today.getTime()); 
 
\t \t  var e_daysLeft = diff/ms_day; 
 
\t \t  var daysLeft = Math.floor(e_daysLeft); 
 
\t \t 
 
\t \t  var e_hoursLeft = (e_daysLeft - daysLeft)*24; 
 
\t \t  var hoursLeft = Math.floor(e_hoursLeft); 
 
\t \t 
 
\t \t  var e_minutesLeft = ((e_hoursLeft - hoursLeft)*60); 
 
\t \t  var minutesLeft = Math.floor(e_minutesLeft); 
 
\t \t 
 
\t \t  var e_secondsLeft = Math.floor((e_minutesLeft - minutesLeft)*60); 
 
\t \t  var secondsLeft = Math.floor(e_secondsLeft); 
 
\t \t 
 
\t \t  var text = 'Left: ' 
 
\t \t      +daysLeft+' days, ' 
 
\t \t      +hoursLeft+ ' hours, ' 
 
\t \t      +minutesLeft+ ' minutes ' 
 
\t \t      +zero(secondsLeft)+' seconds!' 
 
\t \t 
 
\t \t  var element = document.getElementById(id); 
 
\t \t 
 
\t \t 
 
\t \t  if (daysLeft+hoursLeft+minutesLeft+secondsLeft <= 0) { 
 
\t \t   element.innerHTML = 'Over' ; 
 
\t \t  } else { 
 
\t \t   element.innerHTML = text; 
 
\t \t   setTimeout("counter(day,month,id)",1000) 
 
\t \t  } 
 
\t \t } 
 
\t \t counter(14,2,'test7'); 
 
\t \t counter(27,3,'test8'); 
 
\t \t counter(30,6,'test9'); 
 

 
\t \t </script> 
 

 
<body onload="counter(14,2,'test7'); counter(27,3,'test8'); counter(30,6,'test9');"> 
 

 
\t <div id="test7"></div> 
 
\t <div id="test8"></div> 
 
\t <div id="test9"></div> 
 

 
</body> 
 
</html>

你能告訴我爲什麼setTimeout("counter(day,month,id)",1000)不工作？

來源

2016-01-06 userresu

不應該是'setTimeout（counter（day，month，id），1000）'工作嗎？ – SarathChandra

正如其他人指出的那樣，您傳遞的是字符串文本而不是函數。

這就是說，人們經常做的一個典型的跟進錯誤是寫setTimeout(counter(day, month, id))。當你調用一個函數（甚至作爲一個參數）時，該函數立即被調用。從運行時的角度來看，最終看起來是這樣的。

請致電counter(day, month, id)並將該調用的返回結果。在你的程序中，這個函數最終會在返回null時完成循環。
呼叫setTimeout(null, 1000)，傳遞的counter(day, month, id)

調用setTimeout(counter(day, month, id))結果真的只是充當簡寫：

var result = counter(day, month, id); 
setTimeout(result, 1000);

這就是爲什麼其他答案建議包裝功能：

setTimeout(function() { 
    counter(day, month, id); 
}, 1000);

這允許您仍然將所有參數傳遞給counter，同時仍然將不帶參數的函數傳遞給setTimeout。

一個清潔溶液（至少我）是使用bind，其是一種像用於上述方法的更方便的簡寫：

setTimeout(counter.bind(this, day, month, id), 1000);

這以外此答案的範圍內，但我喜歡bind的原因是參數將通過值而不是引用傳入，因此使用它時，您不太可能遇到涉及循環內部的JavaScript閉包的相關常見錯誤。記住bind在內部非常類似於手動包裝你的方法，這對你來說很重要。

在這兩個實例中，您都在創建一個新函數，它使用預定義的參數爲您調用目標函數，然後傳遞該新函數而不是原始函數。

來源

2016-01-06 13:36:10 danShumway

的setTimeout預期的功能，不只是一個字符串，看看這裏：http://www.w3schools.com/jsref/met_win_settimeout.asp

這裏是一個修改工作版本：https://jsfiddle.net/3todtotp/

計數器

<script type="text/javascript"> 
    function zero(element) { 
     if (element < 10) return element = "0" + element; 
     return element; 
    } 

    function counter(day, month, id) { 
     var year = (new Date).getFullYear(); 
     var today = new Date(); 
     var vDate = new Date(year,month-1,day,9,00); 
     var ms_day = 24 * 60 * 60 * 1000; 

     var diff = (vDate.getTime() - today.getTime()); 
     var e_daysLeft = diff/ms_day; 
     var daysLeft = Math.floor(e_daysLeft); 

     var e_hoursLeft = (e_daysLeft - daysLeft)*24; 
     var hoursLeft = Math.floor(e_hoursLeft); 

     var e_minutesLeft = ((e_hoursLeft - hoursLeft)*60); 
     var minutesLeft = Math.floor(e_minutesLeft); 

     var e_secondsLeft = Math.floor((e_minutesLeft - minutesLeft)*60); 
     var secondsLeft = Math.floor(e_secondsLeft); 

     var text = 'Left: ' 
         +daysLeft+' days, ' 
         +hoursLeft+ ' hours, ' 
         +minutesLeft+ ' minutes ' 
         +zero(secondsLeft)+' seconds!' 

     var element = document.getElementById(id); 


     if (daysLeft+hoursLeft+minutesLeft+secondsLeft <= 0) { 
      element.innerHTML = 'Over' ; 
     } else { 
      element.innerHTML = text; 
      setTimeout(function(){counter(day,month,id)},1000) 
     } 
    } 
    counter(14,2,'test7'); 
    counter(27,3,'test8'); 
    counter(30,6,'test9'); 

    </script>

<div id="test7"></div> 
<div id="test8"></div> 
<div id="test9"></div>

來源

2016-01-06 12:20:33

這是問題:)謝謝！ – userresu

嘗試的setTimeout（函數（）{計數器（日，月，ID）}，1000），所以它這是考慮到不setTimeout的字符串的函數。

來源

2016-01-06 12:20:35

這仍然不是一個功能，請閱讀手冊。 –

一個頁面上的兩個計數器

回答

相關問題