jquery stop setIterval

Question

I have created this code to random my divs when I'm clicking on the button:

$('button').click(function(){ 
              setInterval(function(){ 

                var firstdiv = $('.roll div:first');
                var lastdiv = $('.roll div:last');

                firstdiv.insertAfter(lastdiv);
                firstdiv = firstdiv.next();  

               }, 100);
           });

How can I stop it after 5 seconds for example?

My Example: http://jsfiddle.net/L0aaxqrs/

score 2 · Accepted Answer · answered Feb 12 '15 at 21:19

You clear it inside a timeout

$(document).ready(function () {
    $('button').click(function () {
        var interval = setInterval(function () {

            var firstdiv = $('.roll div:first');
            var lastdiv = $('.roll div:last');

            firstdiv.insertAfter(lastdiv);
            firstdiv = firstdiv.next();

        }, 100);

        setTimeout(function() {
            clearInterval(interval);
        }, 5000)

    });
});

FIDDLE

jquery stop setIterval

1 Answers1