在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

你需要清除队列，所以

$(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

Answer 2

现在，你不等待动画调用下一次迭代之前结束。如果你看看你的控制台，你应该看到一个堆栈溢出错误，因为你的函数立即调用它自己。

这里有一个解决方案：

//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

Answer 3

您的说法是做你需要的另一个条件，打破它的循环。尝试用((i < rainbow.length) && (loop != 0))

Answer 4

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); 

}); 

简单更换i<rainbow.length，环路简单地通过调用在animate()回调函数loop实现, 500, loop);

Answer 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