Javascript setInterval和clearInterval未按预期工作

我有这个功能，它充当一个加载框，使用

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

，如果我多次单击它，闪烁也会失灵。我试着移除盒子，把它们藏起来，但我似乎无法清除“缓冲区”？有什么想法吗？

它之所以一直闪烁，是因为每次调用

加载

时，它都会创建一个新变量

start

，因此

clearInterval

实际上什么也没做。您也不应该在

加载

中使用

框

函数，因为每次调用

加载

时都会创建一个新的

框

函数。脚本执行的时间越长，这将增加很多延迟

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

}

---

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

---

原因是每次调用loading时，它都会创建一个新的间隔或新的

var start

。因此，如果你点击两次，那么你有两件事在处理相同的数据。因此，您需要将

var start

置于函数外部，将

clearInterval

置于函数内部。因此，每次调用loading时，它都会清除间隔并创建一个新的间隔

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

---

函数声明被“提升”到其作用域的顶部，这就是扰乱执行顺序的原因。检查此项：

clearInterval

和

setInterval

是javascript函数而不是jquery。jquery是一个位于javascript之上的框架。加载函数中有

box（）

函数，这是一个完美的发现。没有必要将它移到外部，这样做对名称空间的污染超过了要求。解决这个问题的关键是将i和start值移到一个更高的范围。理想情况下，您可以将所有内容都放在一个名称空间或闭包中，这样全局名称空间就不会受到污染。对我来说，这种方式更容易理解，cleanerI只是说OP的

box（）

位于

loading（）

的内部，而您将其移到了顶层范围之外。这部分改变是不需要的，也是不可取的，也不会让它变得更干净。这只是个人喜好。除非内部函数返回某些东西，否则我不会将函数放入函数中。全局作用域不会被污染，因为所有这些都应该在名称空间或闭包中。好的，我有一个不同的个人偏好。我不会将函数置于比需要更高的范围内。如果它们只在函数中使用，那么我在那里声明它们。我认为这也使代码更加自我记录，因为代码的声明方式表明

box（）

是一个本地函数，没有从其他地方调用。我不知道为什么返回值与您的选择有关。