打破 JQuery 中的 if 循环答案

【问题标题】：Breaking an if loop in JQuery打破 JQuery 中的 if 循环
【发布时间】：2014-03-04 16:43:50
【问题描述】：

我无法停止 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;
    });
});

【问题讨论】：

你在做动画的时候真的需要设置一个超时时间，它每秒会启动一个新的数百次，所以即使你停止它也会试图赶上自己，所以会保持持续很长时间。
循环的不是if 语句。 if 语句执行一次，然后继续。 if 内的 for 语句是循环的。

标签： javascript jquery html if-statement for-loop

【解决方案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

【讨论】：

【解决方案2】：

你需要清空队列，所以

$(document).ready(function () {
    //Defines variables.
    var loop = true,
        //current color index
        current = 0;
    var rainbow = ["red", "orange", "yellow", "green", "blue", "purple"];


    function strobe() {
        if (loop) {
            if (current >= rainbow.length) {
                //reset to initial color
                current = 0;
            }
            $('#color').animate({
                "background-color": rainbow[current++]
            }, 500, strobe);
        }
    };

    //loops the color changing if 'loop' is 1.
    $('#go').click(function () {
        //restart the animation
        loop = true;
        strobe();
    });

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

});

演示：Fiddle

【讨论】：

您并没有真正修复代码。打开控制台：Uncaught RangeError: Maximum call stack size exceeded （见我的回答）。

【解决方案3】：

http://jsfiddle.net/HfuvK/35/

$(function(){

    var $color  = $('#color'); // Cache your elements!!
    var rainbow = ["red","orange","yellow","green","blue","purple"];
    var i = 0;
    var n = rainbow.length;

    function loop(){
      $color.stop().animate({backgroundColor:rainbow[++i%n]}, 500, loop);     
    }
    function stop(){
      $color.stop();
    }

    $( '#go' ).click(loop);
    $('#stop').click(stop);

});

简单地说，循环只是通过调用animate()中的函数loop来实现的callback, 500, loop);

【讨论】：

【解决方案4】：

您的 for 语句正在执行循环，您需要另一个条件来打破它。尝试将i<rainbow.length 替换为((i < rainbow.length) && (loop != 0))

【讨论】：

【解决方案5】：

另一种方法是使用setInterval:

    var rainbow = ["red","orange","yellow","green","blue","purple"];
    var interval,i = 0;

    $('#go').click(function(){
        interval = setInterval(function() {
            i = (i+1)%rainbow.length;
            $('#color').animate({"background-color":rainbow[i]},500);
        },500);
    });


    $('#stop').click(function(){
        clearInterval(interval);
    });

FIDDLE

【讨论】：