JavaScript的計時器奇怪的行爲

Question

我正在一個ASP.NET Web項目，我用一個Javascript定時器執行定期操作（我改變這個定時器的頁面內容），但我認爲這個定時器不能正常工作，例如，當我將其間隔設置爲10000（10秒）時，它以10秒爲間隔打勾，而且在最後一次打勾後僅有1秒鐘打勾，其打勾格式如下所示：

tick-1s- tic ------ 10 s ----- tick-1s tick ------ 10s tick-1s-tick ----- 10s tick ......

當我設置我的間隔時間爲1秒，我填寫100毫秒後有一個額外的滴答聲，這裏出了什麼問題？這個額外的勾號是什麼？

這裏是我的JS代碼：

pageload: 
       ChangeNewsTimer(); 

...

  function ChangeNewsTimer() { 
      var timer = setTimeout("ChangeNewsTimer()", 5000); 
      var g = document.getElementById('<%=HFLux.ClientID %>').value.split(','); 
      imgLuxIndex++; 
      if (imgLuxIndex == g.length) 
       imgLuxIndex = 0; 

      document.getElementById('<%=hpLux1.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux2.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux3.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux4.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux5.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux6.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux7.ClientID %>').style.color = 'white'; 
      document.getElementById('<%=hpLux8.ClientID %>').style.color = 'white'; 

      if (imgLuxIndex == 0) 
       document.getElementById('<%=hpLux1.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 1) 
       document.getElementById('<%=hpLux2.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 2) 
       document.getElementById('<%=hpLux3.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 3) 
       document.getElementById('<%=hpLux4.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 4) 
       document.getElementById('<%=hpLux5.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 5) 
       document.getElementById('<%=hpLux6.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 6) 
       document.getElementById('<%=hpLux7.ClientID %>').style.color = 'yellow'; 
      else if (imgLuxIndex == 7) 
       document.getElementById('<%=hpLux8.ClientID %>').style.color = 'yellow'; 

      var gg = g[imgLuxIndex].split(';'); 
      document.getElementById('<%=imgLux.ClientID %>').src = gg[0]; 
      document.getElementById('<%=lblLuxResName.ClientID %>').value = document.getElementById('<%=lblLuxResName.ClientID %>').innerHTML = gg[1]; 

/////////////////////// //////////

  var d = document.getElementById('<%=HFUserCooking.ClientID %>').value.split(','); 
      usercookingINdex++; 
      //alert(d.length); 
      if (usercookingINdex == d.length) 
       usercookingINdex = 0; 

      var dd = d[usercookingINdex].split(';'); 
      //alert(usercookingINdex); 
      document.getElementById('<%=imgUserCooking.ClientID %>').src = dd[0]; 
      document.getElementById('<%=lblImageSender.ClientID %>').value = document.getElementById('<%=lblImageSender.ClientID %>').innerHTML = dd[1]; 

      /////////////// 


      var w = document.getElementById('<%=HFSlide.ClientID %>').value.split(','); 
      imgMainIndex++; 
      if (imgMainIndex == 3) 
       imgMainIndex = 0; 

      document.getElementById('<%=imgMain.ClientID %>').src = w[imgMainIndex]; 

      var q = document.getElementById('<%=hfHealthNews.ClientID %>').value.split('%'); 
      newsIndex++; 
      var q2 = q[newsIndex].split('$'); 
      if (newsIndex == 10) 
       newsIndex = 0; 
      document.getElementById('<%=hpNewsHealthTitle.ClientID %>').value = document.getElementById('<%=hpNewsHealthTitle.ClientID %>').innerHTML = q2[0]; 
      document.getElementById('<%=lblNewsHealthSummary.ClientID %>').value = document.getElementById('<%=lblNewsHealthSummary.ClientID %>').innerHTML = q2[1]; 
      document.getElementById('<%=imgNewsHealth.ClientID %>').src = q2[2]; 
      var yourElement = document.getElementById('<%=hpNewsHealthTitle.ClientID %>'); 
      yourElement.setAttribute('href', q2[3]); 

      var yourElement2 = document.getElementById('<%=hpNewsHealth.ClientID %>'); 
      yourElement2.setAttribute('href', q2[3]); 

      //cooking 
      q = document.getElementById('<%=HFCookingNews.ClientID %>').value.split('%'); 
      newsIndex2++; 
      q2 = q[newsIndex2].split('$'); 
      if (newsIndex2 == 10) 
       newsIndex2 = 0; 
      document.getElementById('<%=hpCookingNewsTitle.ClientID %>').value = document.getElementById('<%=hpCookingNewsTitle.ClientID %>').innerHTML = q2[0]; 
      document.getElementById('<%=lblCookingNewsSummary.ClientID %>').value = document.getElementById('<%=lblCookingNewsSummary.ClientID %>').innerHTML = q2[1]; 
      document.getElementById('<%=imgCookingNews.ClientID %>').src = q2[2]; 
      var yourElement = document.getElementById('<%=hpNewsHealthTitle.ClientID %>'); 
      yourElement.setAttribute('href', q2[3]); 

      var yourElement2 = document.getElementById('<%=hpCookingNews.ClientID %>'); 
      yourElement2.setAttribute('href', q2[3]); 

      //comment 1 
      q = document.getElementById('<%=HFComment1.ClientID %>').value.split('%'); 
      commentIndex++; 
      q2 = q[commentIndex].split('$'); 
      if (commentIndex == 10) 
       commentIndex = 0; 

      document.getElementById('<%=hpNewsComment.ClientID %>').value = document.getElementById('<%=hpNewsComment.ClientID %>').innerHTML = q2[0]; 
      document.getElementById('<%=lblNewsComment.ClientID %>').value = document.getElementById('<%=lblNewsComment.ClientID %>').innerHTML = q2[2]; 
      var yourElement5 = document.getElementById('<%=hpNewsComment.ClientID %>'); 
      yourElement5.setAttribute('href', q2[1]); 

      //comment 2 
      q = document.getElementById('<%=HFComment2.ClientID %>').value.split('%'); 
      commentIndex2++; 

      if (commentIndex2 == q.length - 1) 
       commentIndex2 = 0; 
      if (q[commentIndex2] != '') { 
       q2 = q[commentIndex2].split('$'); 
       document.getElementById('<%=hpRevComment.ClientID %>').value = document.getElementById('<%=hpRevComment.ClientID %>').innerHTML = q2[0]; 
       document.getElementById('<%=lblRevComment.ClientID %>').value = document.getElementById('<%=lblRevComment.ClientID %>').innerHTML = q2[2]; 
      } 
      //var yourElement6 = document.getElementById('<%=hpRevComment.ClientID %>'); 
      //yourElement6.setAttribute('href', q2[1]); 

      //comment 3 
      q = document.getElementById('<%=HFComment3.ClientID %>').value.split('%'); 
      commentIndex3++; 
      q2 = q[commentIndex3].split('$'); 
      if (commentIndex3 == 10) 
       commentIndex3 = 0; 

      document.getElementById('<%=hpResComment.ClientID %>').value = document.getElementById('<%=hpResComment.ClientID %>').innerHTML = q2[0]; 
      document.getElementById('<%=lblResComment.ClientID %>').value = document.getElementById('<%=lblResComment.ClientID %>').innerHTML = q2[2]; 
      var yourElement7 = document.getElementById('<%=hpResComment.ClientID %>'); 
      yourElement7.setAttribute('href', q2[1]); 
     } 

Answer 1

更可能是您不小心多次調用ChangeNewsTimer onload。仔細檢查你的代碼，確保你沒有雙重初始化它。另一種選擇是使它成爲ChangeNewsTimer不能初始化多次。就像這樣：

var ChangeNewsTimerInitialized = false; 
function ChangeNewsTimer() { 
    if (ChangeNewsTimerInitialized === true) return; 
    ChangeNewsTimerInitialized = true; 
    var func = function() { 
     setTimeout(func, 10000); 
     document.getElementById("findme").innerHTML += "<br />tick"; 
    } 
    func(); 
}