CODEWITHSUNDEEP
javascriptjqueryhtmlif-statementfor-loop
JazzyScript
JazzyScript

Reputation: 19

Breaking an if loop in JQuery

I'm having trouble stopping a looping if-statement in jquery. The idea is that I have a div which is supposed to start looping through all the colors in the rainbow array and stop when the stop div is clicked. It loops fine, but when I click stop, it doesn't stop looping even though the loop variable is 0. What can I do to get the colors to stop when I click stop?

Click here for a link to my jsfiddle page where I'm coding it.

$(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;
    });
});

Upvotes: 1

Views: 850

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206038

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

});

straightforward, the loop is simply achieved by recalling the function loop in the animate() callback , 500, loop);

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You need to clear the queue, so

$(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)
    });

});

Demo: Fiddle

Upvotes: 3

MamaWalter
MamaWalter

Reputation: 2113

an alternative could be to use 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

Upvotes: 0

Ecropolis
Ecropolis

Reputation: 2025

Your for statement is doing the looping you need another condition to break it. Try replacing i<rainbow.length with ((i < rainbow.length) && (loop != 0))

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

Right now, you're not waiting for the animation to end before you call the next iteration. If you look at your console, you should see a stack overflow error because your function is immediately calling itself.

Here's a solution :

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

Upvotes: 3

Related Questions