javascript timer странное поведение

Question

Я работаю над веб-проектом ASP.NET, я использовал таймер 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 более одного раза при загрузке. Просмотрите свой код, чтобы убедиться, что вы не инициализируете его дважды. Другой вариант - сделать так, чтобы 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(); 
}