setInterval 和 clearInterval 没有按预期工作答案

【问题标题】：setInterval and clearInterval not working as expectedsetInterval 和 clearInterval 没有按预期工作
【发布时间】：2011-10-12 22:47:29
【问题描述】：

我有这个功能，它作为一个加载框使用setInterval来改变背景图像，从而产生闪烁的效果。

 function loading() {
    clearInterval(start);

    var i = 0;
    function boxes() {

        in_loading = ".in_loading:eq("  + i + ")";
        $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
        $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        

        if(i == 3) {
            i = 0;
        } else {
            i++;
        }

    }
    var start = setInterval(function() {
        boxes();
    }, 350);
}

但即使使用clearInterval，如果我多次单击它，闪烁也会出现故障。我尝试移除盒子，隐藏它们，但我似乎无法清除“缓冲区”？有什么想法吗？

【问题讨论】：

clearInterval 和 setInterval 是 javascript 函数而不是 jquery。 jquery 是位于 javascript 之上的框架。

标签： javascript jquery setinterval clearinterval

【解决方案1】：

之所以一直闪烁是因为每次调用loading都会创建一个新变量start，所以clearInterval实际上什么也没做。您也不应该在loading 中使用boxes 函数，因为它在做同样的事情，每次调用loading 时都会创建一个新的boxes 函数。脚本执行的时间越长，这会增加很多延迟。

var i = 0;
var start;
function loading() {
    clearInterval(start);

    start = setInterval(function() {
        boxes();
    }, 350);
}

function boxes() {

    var in_loading = ".in_loading:eq("  + i + ")";
    $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
    $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        

    if(i == 3) {
        i = 0;
    } else {
        i++;
    }

}

【讨论】：

完美地发现在加载函数中有boxes() 函数。没有必要将它移到外面，这样做对命名空间的污染超出了要求。解决这个问题的关键是将 i 和 start 值移动到更高的范围。
理想情况下，您应该将所有内容都放在一个命名空间或闭包中，这样全局命名空间就不会被污染。对我来说，这种方式更容易理解和清洁
我只是说 OP 在 loading() 内有 boxes()，而您将其移到顶级范围之外。您的那部分更改不是必需的，也是不可取的，并且不会使它更干净。
这只是个人喜好。除非内部函数返回某些内容，否则我不会将函数放在函数中。全局范围不会被污染，因为所有这些都应该在命名空间或闭包中。
好的，我有不同的个人喜好。我不会把函数放在比需要更高的范围内。如果它们只在函数中使用，那么我在那里声明它们。我认为它也使代码更具自我记录性，因为声明代码的方式表明boxes() 是一个本地函数，不会从其他任何地方调用。我不知道为什么返回值与您的选择有关。

【解决方案2】：

函数声明被“提升”到其作用域的顶部，这就是搞乱执行顺序的原因。检查这个：http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

【讨论】：

【解决方案3】：

原因是每次调用加载它都会创建一个新的间隔或新的var start。因此，如果您单击它两次，那么您将有两件事在处理相同的数据。所以你需要在函数之外有var start，在里面有clearInterval。所以每次你调用加载它都会清除间隔并创建一个新的。

var i = 0;
var start;
function loading() {
    clearInterval(start);

    start = setInterval(boxes, 350);
}

function boxes() {

    in_loading = ".in_loading:eq("  + i + ")";
    $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
    $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        

    if(i == 3) {
        i = 0;
    } else {
        i++;
    }
}

【讨论】：

【解决方案4】：

也许你应该看看这个 Jquery Plugin ，它似乎很好地管理了间隔。

Jquery Timers Plugin

【讨论】：