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。查看您的代码以确保您没有重复初始化它。另一种选择是使 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();
}