尝试修复倒数计时器问题，该问题会导致计时器 运行 然后在使用 Javascript 时崩溃大约十秒

Question

我有一个 JavaScript 关于我正在尝试实施的倒数计时器的问题。我知道我已经非常接近了，因为 a) 计时器实际上以正确的时间显示在我的屏幕上，并且 b) 实际上每秒开始倒计时过程。我仍然认为自己是 JavaScript 中的新手，所以如果答案显而易见，我深表歉意。我遇到的问题是，大约十到十五秒后，倒数计时器停止几秒钟，然后导致我的浏览器崩溃。如果有人知道如何防止这种情况并使计时器顺利工作，我们将不胜感激。

谢谢。

这是我在代码中使用的 JavaScript 和 HTML：

<script type="text/javascript"> 

            var endtime = new Date("October 01 2016 12:00:00");  /* DESIRED START DATE AND TIME OF EVENT */

            function getTimeLeft() {
                var now = new Date();
                var timeDiff = endtime.getTime() - now.getTime();
                if (timeDiff <=0) { /* When Countdown Reaches 00:00:00 */
                    clearTimeout(timer);
                    var inprogress = document.getElementById('countdown');
                    var inner = document.getElementsByClassName('duration, duration_number');
                    inprogress.innerHTML = "TIME IN!";
                    inner.removeClass('duration');
                    inner.removeClass('duration_number');
                    inner.addClass('gameon'); /* style this to center a big message */
                    inner.addClass('colourchanger');
                    /*document.getElementById('countdown').innerHTML = "GAME OVER!"; Checking if date has passed time out */
                }

                var seconds = Math.floor(timeDiff/1000);
                var minutes = Math.floor(seconds/60);
                var hours = Math.floor(minutes/60);
                var days = Math.floor(hours/24);

                seconds %= 60;
                minutes %= 60;
                hours %= 24;
                seconds = ("0" + seconds).slice(-2);
                minutes = ("0" + minutes).slice(-2);
                hours = ("0" + hours).slice(-2);
                //var timeinterval = setInterval(getTimeLeft,1000);
                //var timeinterval = setInterval(updateClock,1000);
                /*updateClock(); // run function again to loop every second*/
                function updateClock(){
                    if (timeDiff >0){
                    document.getElementById("daysBox").innerHTML = days;
                    document.getElementById("hoursBox").innerHTML = hours;
                    document.getElementById("minutesBox").innerHTML = minutes;
                    document.getElementById("secondsBox").innerHTML = seconds;
                    var timeinterval = setInterval(getTimeLeft,1000);
                    //setInterval(getTimeLeft,1000);
                    /*getTimeLeft();*/
                    }
                    else if(timeDiff<=0){
                        clearInterval(timeinterval);
                    }

                }
                updateClock(); // run function again to loop every second   */
            //  timeinterval(getTimeLeft,1000);
            }

        </script>

<div id="countdown" class="borderchange">
            <div class="duration">
                Days:<br><br> 
                <div class="duration_number"><span id="daysBox" class="days"></span></div>
            </div>
            <div class="duration">
                Hours:<br><br> 
                <div class="duration_number"><span id="hoursBox" class="hours"></span></div>
            </div>
            <div class="duration">
                Minutes:<br><br> 
                <div class="duration_number"><span id="minutesBox" class="minutes"></span></div>
            </div>
            <div class="duration">
                Seconds:<br><br> 
                <div class="duration_number"><span id="secondsBox" class="seconds"></span></div>
            </div>
        </div>
        <script>
        getTimeLeft();
        //setInterval(getTimeLeft,1000);
        </script>

Answer 1

您将 setTimeout 与 setInterval 混淆了。来自 W3Schools：

The two key methods to use with JavaScript are:

• setTimeout(function, milliseconds)

  Executes a function, after waiting a specified number of milliseconds.

• setInterval(function, milliseconds)

  Same as setTimeout(), but repeats the execution of the function continuously.

每次调用 getTimeLeft 时，您都在调用 setInterval(getTimeLeft,1000);，因此在 2 秒后，已经有 4 个间隔 运行 做同样的事情，在 3 秒 8 之后，依此类推。

删除 updateClock() 函数中的行 setInterval(getTimeLeft,1000); 并取消注释最后一行中的行 setInterval(getTimeLeft,1000); 在你的 HTML 部分只开始一次间隔。

此外，要正确清除它，您应该将此间隔保存到全局变量中，以便您可以在 updateClock() 中引用它。

Fiddle