2

我有这个功能，它充当加载框，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我多次单击它，闪烁也会出现故障。我尝试移除盒子，隐藏它们，但我似乎无法清除“缓冲区”？有任何想法吗？

4

4 回答 4

3

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

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++;
    }

}
于 2011-10-12T14:23:53.077 回答
1

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

于 2011-10-12T14:34:40.107 回答
0

原因是每次调用 loading 它都会创建一个新的 Interval 或 new 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++;
    }
}
于 2011-10-12T14:26:22.873 回答
-3

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

Jquery 计时器插件

于 2011-10-12T14:25:15.417 回答