javascript - 在 JQuery 中打破 if 循环

Question

我在停止 jquery 中的循环 if 语句时遇到问题。这个想法是我有一个 div，它应该开始循环遍历彩虹数组中的所有颜色，并在单击停止 div 时停止。它循环正常，但是当我单击停止时，即使循环变量为 0，它也不会停止循环。我该怎么做才能让颜色在单击停止时停止？

点击here获取我正在编写代码的 jsfiddle 页面的链接。

$(document).ready(function () {
    //Defines variables.
    var loop = 1;
    var rainbow = ["red", "orange", "yellow", "green", "blue", "purple"];
    //loops the color changing if 'loop' is 1.
    $('#go').click(function strobe() {
        if (loop) {
            for (var i = 0; i < rainbow.length; i++) {
                $('#color').animate({
                    "background-color": rainbow[i]
                }, 500);
            }
            strobe();
        }
    });
    //Sets 'loop' to 0 to prevent looping.
    $('#stop').click(function () {
        loop = 0;
    });
});

Answer 1

现在，您无需等待动画结束就可以调用下一次迭代。如果您查看控制台，您应该会看到堆栈溢出错误，因为您的函数正在立即调用自身。

这是一个解决方案:

//Defines variables.
var loop = 1, i=0;
var rainbow = ["red","orange","yellow","green","blue","purple"];

//loops the color changing if 'loop' is 1.
$('#go').click(function strobe(){
    if(loop){
       $('#color').animate({"background-color":rainbow[i]}, 500, strobe);     
       i = (i+1)%rainbow.length;
    }
});

//Sets 'loop' to 0 to prevent looping.
$('#stop').click(function(){
    loop = 0;
});

Demonstration