stop a jQuery function

Question

every 5 seconds with setTimeout I'm executing a jQuery function, how can I stop the process by clicking on a div?

my code is:

function crono(selection){
    $.ajax({
        type: 'GET', 
        url: 'my_page.php', 
        data: {
            my_page: selection.attr('id')
        },
        success: function(data, textStatus, jqXHR) {
            selection.html(data);   
        }
    });
}


function repeat(){
    setTimeout(function() {
        $('.toReload').each(function(){
            crono($(this));
        });
        repeat();
    }, 5000);
}

repeat();

On what condition do you want to stop it? Just call `clearTimeout(var)` where `var` is the timer to be cleared. — Rory McCrossan, Jul 03 '13 at 12:51
Use a named timeout and call `clearTimeout` whenever you want to cancel it. — Mansfield, Jul 03 '13 at 12:51

score 1 · Accepted Answer · answered Jul 03 '13 at 12:51

1

Use clearTimeout https://developer.mozilla.org/fr/docs/DOM/window.clearTimeout :

var handle = null;

function repeat(){
    handle  = setTimeout(function() {
        $('.toReload').each(function(){
            crono($(this));
        });
        repeat();
    }, 5000);
}

and cancel the setTimeout by calling :

clearTimeout(handle);

answered Jul 03 '13 at 12:51

sdespont

13,915
9
56
97

fail stop ajax request. – e-info128 Jul 03 '13 at 13:09

Damian0o · Answer 2 · 2013-07-03T13:00:56.210

1

Use flag to do this.

var end = false;

function repeat(){
   setTimeout(function() {
      if(!end){ 
          $('.toReload').each(function(){
            crono($(this));
          });
          repeat();
      }     
   }, 5000);
}
...

$('#div').click(function(){
 end = true;
});

edited Jul 03 '13 at 13:00

answered Jul 03 '13 at 12:53

Damian0o

653
5
15

Eric Frick · Answer 3 · 2013-07-03T13:11:46.950

0

Use the timeout ID.

var timeoutID = 0;
function repeat(){
     timeoutID = setTimeout(function() {
        $('.toReload').each(function(){
            crono($(this));
        });
        repeat();
    }, 5000);
}

repeat();

//stop the time out
clearTimeout(timeoutID);

edited Jul 03 '13 at 13:11

answered Jul 03 '13 at 12:52

Eric Frick

847
1
7
18

1

You are redefining the `timeoutID` var as loval var in the function. It will not work – sdespont Jul 03 '13 at 12:53
Sorry, but it is the opposite : the var declaration must be outside the function, and not inside. – sdespont Jul 03 '13 at 13:06
still asleep. 9 am over here lol – Eric Frick Jul 03 '13 at 13:12

score 0 · Answer 4 · answered Jul 03 '13 at 12:55

Use the clearTimeout function

var timeout;

function repeat(){
    timeout = setTimeout(function() {
        $('.toReload').each(function(){
            crono($(this));
        });
        repeat();
    }, 5000);
}

and on the div click call the following function

function stopAjax(){
    clearTimeout(timeout);
}

score 0 · Answer 5 · answered Jul 03 '13 at 13:09

You need clear timeout and ajax request:

    var getData = {
    handleTimeout : 0,
    handleAjax,

    crono : function(selection){
        $.ajax({
            type: 'GET', 
            url: 'my_page.php', 
            data: {
                my_page: selection.attr('id')
            },
            success: function(data, textStatus, jqXHR) {
                selection.html(data);   
            }
        });
    },

    repeat: function(){
        this = ob;
        this.handleTimeout = setTimeout(function() {
            $('.toReload').each(function(){
                ob.crono($(this));
            });
            repeat();
        }, 5000);
    },

    stopAll: function(){
        clearTimeout(this.handleInterval);
        this.handleAjax.abort();
    }
}

getData.repeat();
getData.stopAll();

stop a jQuery function

5 Answers5