Question

我有这个功能，可以使用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，如果我不止一次点击它，闪烁也会出现故障。我试着删除它们，隐藏它们但我似乎无法清除“缓冲区”？有什么想法吗？

Answer 1

它持续闪烁的原因是因为每次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++;
    }

}

Answer 2

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

Answer 3

原因是每次调用加载时都会创建一个新的Interval或新的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++;
    }
}

Answer 4

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

Jquery Timers Plugin

setInterval和clearInterval无法按预期工作

4 个答案: