Stop setInterval() when a particular condition is encountered

Question

I want to stop setInterval() when left margin is 1200px. My code is :-

<html>
<body>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#btn').click(function () {
            var i = setInterval(function () {
                $('img').animate({
                    'margin-left': '+=100px'
                }, 'fast');
                var a = $('img').css('margin-left');
                if (a == "1200px") {
                      clearInterval(i);
                }
            }, 50);
        });
    });
</script>
<img src="48_800[1].jpg" height="50px" width="50px"><br>
<input type="button" value="start" id="btn"><br>
</body>
</html>

It is not working.Can anyone help me?

If a write anything under if() block then it does not get executed.Thats my main problem. — user3298056, Feb 21 '14 at 10:35
@user3298056 atleast explain why is `1200px` ? `.css()` returns you computed style so you cannot assume it to be `1200px` — Deepak Ingole, Feb 21 '14 at 10:37
I think you need to know [How to debug your JavaScript code](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Feb 21 '14 at 10:38
Just make sure that the **intervalID** you use must be unique. Here you have used `i` which is pretty much common. — Bhavik, Feb 21 '14 at 10:40

Alvaro · Answer 1 · 2014-02-21T11:00:58.040

3

You should cast to an integer the pixels value a = parseInt(a);. (as before you were obtaining values of margin-left with decimals, such as 99.45px and then 199.45px so it was jumping the 100px)

Live example

var i = setInterval(function () {

    $('img').animate({
        'margin-left': '+=100px'
    }, 'fast');
    var a = $('img').css('margin-left');
    a = parseInt(a);
    if (a >= 100) {
        clearInterval(i);
    }
}, 50);

Update

I've just noticed the animation still running after the interval has been cleared. Not sure why is this happening but I found a way to solve the problem by caching the final margin in a variable rather than calculating it inside the animation.

Live example 2

Note that in the examples I'm using >=100 to see the results.

edited Feb 21 '14 at 11:00

answered Feb 21 '14 at 10:35

Alvaro

40,778
30
164
336

I'm not sure that example is actually living? :) – Liam Feb 21 '14 at 10:39
Sorry, you misunderstand. I'm just being [facetious](http://dictionary.reference.com/browse/facetious). You would normally say "Live example". A living example imply's it has a life of it's own. +1 BTW! – Liam Feb 21 '14 at 10:41
@cesarandavisa you are right. With quotes is accepted. Thanks. – Alvaro Feb 21 '14 at 10:46

Java_User · Answer 2 · 2014-03-03T12:39:49.110

Use this instead: Updated

$(document).ready(function () {
    $('#btn').click(function () {
        var i = setInterval(function () {
            $('img').animate({
                'margin-left': '+=100px'
            }, 'fast');
            var a = $('img').css('margin-left');
            //console.log(a.substring(0,a.lastIndexOf('px')));
            if (a.substring(0,a.lastIndexOf('px')) >= 1200) {
                  clearInterval(i);
            }
        }, 50);
    });
});

score 0 · Answer 3 · answered Feb 21 '14 at 10:31

0

try this:

if(parseInt(a) >= 1200)
{
     clearInterval(i);
}
},50);

answered Feb 21 '14 at 10:31

Rickert

1,677
1
16
23

score 0 · Answer 4 · answered Feb 21 '14 at 10:42

$(document).ready(function () {
    $('#btn').click(function () {
        var a="";
        while(a != "1200px"){
          $('img').animate({
                'margin-left': '+=100px'
            }, 'fast');
            a = $('img').css('margin-left');
      }
    });
});

your existing code looks erroneous ,besides referring to SetInterval is not required, the same could be achieved with decent while clause itself.

happy Coding :)

score 0 · Answer 5 · answered Feb 21 '14 at 10:46

0

try to change the value for the time into the setInterval method

the number value must to be in milliseconds

answered Feb 21 '14 at 10:46

cesar andavisa

340
1
11

Stop setInterval() when a particular condition is encountered

5 Answers5