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

describe('testCtrl', function(){ it('should create "phones" model with 3 phones', function() { var scope = {}, ctrl = new testCtrl(scope); expect(scope.phones.length).toBe(3); }); });与setTimeout混淆。来自W3Schools：

与JavaScript一起使用的两个关键方法是：



setInterval

在等待指定的毫秒数后执行函数。



setTimeout(function, milliseconds)

与setTimeout（）相同，但是会不断重复执行该函数。

每次调用getTimeLeft时都在调用setInterval(function, milliseconds)，因此在2秒后，已经有4个间隔在运行相同的时间，3秒后8，依此类推。

删除setInterval(getTimeLeft,1000); 功能中的行setInterval(getTimeLeft,1000);，然后取消注释HTML中最后一行中的行updateClock()部分只启动一次间隔。

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

Fiddle

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

1 个答案: