javascript: how to exit a loop by clicking a button

Question

I did some searching and I'm not even sure if what I want to do is good javascript practice. I have a while loop that I would like to exit from early if a stop button is clicked.

$( "#go" ).click(function() {
  var gotime = 1;
  while (gotime < 100) {
    for(i = 0; i < 2; i++){
      var divName = "floatName" + i;
      console.log(divName);
      $( "#" + divName ).animate({
        left: Math.random()*500 + "px",
        top: Math.random()*500 + "px"
      }, 500, function() {
        // Animation complete.
      });
    };

    gotime += 1;

    $( "stop" ).click(function() {
      gotime = 101;
    });
    };
});

This doesn't work though. I originally had an endless loop (not incrementing gotime).

http://jsfiddle.net/cvoxe465/

Artem Baranovskii · Accepted Answer · 2015-08-02 18:38:46Z

3

Actually it stops if you wait for some time. The problem is you execute animation very often and $.animate have to queue it. There is $.stop method that allow you to stop the currently-running animation. DEMO

$( "#stop" ).click(function() {
  gotime = 101;
  $('#floatName0, #floatName1').stop(true, true);
});

EDIT:

Note that in the code that you provided there is mistake. Instead $("stop") you need to use $("#stop").

edited Aug 2, 2015 at 18:38

answered Aug 2, 2015 at 18:29

Artem Baranovskii

1,0136 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sudhansu Choudhary Over a year ago

Please also mention that $(stop) should have been $(#stop), that was the reason why the click button event was not firing and eventually we had to wait for the loop to finish.

Ajay Narain Mathur · Accepted Answer · 2015-08-02 18:48:14Z

1

You may use setInterval:

Js:

var interval;
$("#go").click(function () {
    var gotime = 1;
    interval = setInterval(function () {
        for (i = 0; i < 2; i++) {
            var divName = "floatName" + i;
            console.log(divName);
            $("#" + divName).css({
                left: Math.random() * 500 + "px",
                top: Math.random() * 500 + "px"
            });
        };
        gotime += 1;
        if (gotime > 100) {
            clearInterval(interval);
        }
    }, 500)
});
$("#stop").on('click', function () {
    clearInterval(interval);
});

css:

#randomFloat {
    color: red;
}
#floatName1, #floatName0 {
    transition : 0.5s left, 0.5s top;
}

Fiddle

edited Aug 2, 2015 at 18:48

answered Aug 2, 2015 at 18:42

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

4 Comments

Doug Smith Over a year ago

Thanks, that makes sense. I guess it loops through the for very fast. I was thinking it looped through every 500ms, which was the animation time.

Ajay Narain Mathur Over a year ago

@DougSmith : HI, The reason why i posted this answer here is because you asked for good javascript practice. If you make variable gotime = 101, when user clicks on stop then you can never resume animation. If you remove it then even if you stop the animation the while loop will run 100 times. Now read the answers again and see which is better one. :)

Doug Smith Over a year ago

@AJ: yes, and I can also put the transition into #randomFloat because I see that it gets inherited. Thanks!

Doug Smith Over a year ago

@AJ I'm coming back to this and doing some debugging. This strategy works well but there is a problem is the user clicks #go and then clicks #go again. The animation will not stop after doing this. I forked the Fiddle to try and use the gotime to toggle the clearInterval but that didn't seem to work.

Oliver · Accepted Answer · 2015-08-02 18:49:33Z

1

animate doesn't block the loop. The animations are stacked up and then executed, but the loop finishes a lot earlier. Here is something that works:

var loopAllowed = false;
$('#go').click(function(){
    loopAllowed = true;
    var max = 2;
    var loop = function(){
        for(var i = 0; i < max; i++){
            var divName = "floatName" + i;
            $( "#" + divName ).animate({
                left: Math.random()*500 + "px",
                top: Math.random()*500 + "px"
            }, 500, i === max - 1 && loopAllowed ? loop : undefined);
        }
    };
    loop();
});

$('#stop').click(function(){
    loopAllowed = false;    
});

JSFiddle. We manually call the loop function after the animation has ended (by passing it as the callback function). If loopAllowed is false (e.g. set to false by clicking #stop), then it won't be passed as the callback function and the looping stops.

edited Aug 2, 2015 at 18:49

answered Aug 2, 2015 at 18:39

Oliver

4,1212 gold badges23 silver badges36 bronze badges

3 Comments

Doug Smith Over a year ago

I like this solution because I plan on animating several more names, and this solution doesn't require more calls to floatNameX

Doug Smith Over a year ago

Could you briefly explain what the i == max - 1 && loopAllowed ? loop : undefined does? I understand that the i == max - 1 && loopAllowed checks for a condition, but I don't get the ? loop : undefined. As well, I don't see how these parts fit in with the documentation for jquery's docs api.jquery.com/animate. Is it part of the queue option?

Oliver Over a year ago

@DougSmith It's the ternary operator. It's essentially a shorthand for if - if the condition is true, pass loop as callback, if it is false, pass undefined as callback (which will end the loop). The callback is called after the animation is finished - which is why we can loop like this (after the animation, loop is called again). The queue option is true by default (the animations are placed in a queue by default and then executed sequentially), but my code doesn't touch that.

Collectives™ on Stack Overflow

javascript: how to exit a loop by clicking a button

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related