首页 > clearInterval无法清楚setInterval了?!

clearInterval无法清楚setInterval了?!

html<input type="text" id="time">
<button id="btn">确定</button>
<p id="counter"></p>
javascript    window.onload = function() {
        var btn = document.getElementById('btn');
        btn.onclick = getTime;
        function getTime() {
            function count(sec, cur) {
                var dif = (sec - cur) / 1000;
                var day = Math.floor(dif/3600/24);
                var s1 = dif % (3600 * 24);
                var hour = Math.floor(s1 / 3600);
                var s2 = s1 % 3600;
                var minute = Math.floor(s2 / 60);
                var s3 = s2 % 60;
                var second = Math.floor(s3);
                document.getElementById('counter').innerHTML = '距离' + str + ' 00:00:00' + '还有' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒';
            }
            window.clearInterval(intId);
            var str = document.getElementById('time').value;
            var cur = Date.parse(new Date());
            var sec = Date.parse(str+' 00:00:00');
            count(sec, cur);
            var intId = window.setInterval(function () {
                sec -= 1000;
                count(sec, cur);
            }, 1000);

        }
    };

不明白为什么setInterval返回值,在getTime的作用域下,有时为空?!


举个最简单的例子,你就明白了.

function test(){
    console.log(a);//相当于你的clearInterval, 值是 undefined
    var a = 100;//相当于你的 setInterval
};

test();
test();
test();
test();

具体原因,请参考 JavaScript 秘密花园 - 变量声明提升(Hoisting)

解决办法:

    window.onload = function() {
        var btn = document.getElementById('btn'), intId;
        btn.onclick = getTime;
        function getTime() {
            function count(sec, cur) {
                var dif = (sec - cur) / 1000;
                var day = Math.floor(dif/3600/24);
                var s1 = dif % (3600 * 24);
                var hour = Math.floor(s1 / 3600);
                var s2 = s1 % 3600;
                var minute = Math.floor(s2 / 60);
                var s3 = s2 % 60;
                var second = Math.floor(s3);
                document.getElementById('counter').innerHTML = '距离' + str + ' 00:00:00' + '还有' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒';
            }
            window.clearInterval(intId);
            var str = document.getElementById('time').value;
            var cur = Date.parse(new Date());
            var sec = Date.parse(str+' 00:00:00');
            count(sec, cur);
            intId = window.setInterval(function () {
                sec -= 1000;
                count(sec, cur);
            }, 1000);

        }
    };
【热门文章】
【热门文章】