将setInterval赋予javascript中的全局变量时，如何纠正clearInterval？

Question

这是我的代码

HTML代码

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

以下是一段Javascript代码

//The below line is outside of document ready
var interval;

//The below code is wraped in  document ready
$("input").live("click", function(){

 var length = $('li').length, start = 1;
    alert(length+' : '+start);
    interval = setInterval(function() {
                    if (length > 0 && start <= length) {
                        alert('IF section');
                        $('li:nth-child('+start+')').
                           removeClass('hidden').addClass('visible');
                        start++;
                    } else {
                        alert('Else section with before clearInterval called');
                        clearInterval(interval);
                        alert('Else section with after clearInterval called');

                    }
}, 3000);


});

在执行clearInterval方法之后，这里将重复调用ELSE部分。 一个有趣的事情是警报之前clearInterval语句repeately叫，一段时间后， 警报 clearInterval不叫setInterval方法。 您可以在小提琴中找到一个示例。 在小提琴中， var interval位于DomReady内部。 它应该在DomReady之外。 我不知道如何把它放在DomReady之外。

为什么会这样？

如何纠正呢？

Answer 1

检查此演示 ： http : //jsfiddle.net/QZxtL/1/

您需要做的就是将clearInterval调用更改为clearInterval(interval);

注意 ：我将时间间隔更改为1000毫秒，以简化测试。 :-)