Stop setInterval in AJAX JQuery

Question

a question for those more experienced than me. How can I stop the execution of the setInterval having this code and not being able to use a main function? Thanks for your help.

$(".scrivi-messaggio").click(function()
{         
    var username_utente = $('#username-utente').val();    
    $('.modal-title').html('Chat di '+username_chat);

    setInterval(function()
    {

        $.get("//localhost/laravel/public/index.php/stampa_messaggi/"+id, 

        function(data)
        { 
            data_parsed = JSON.parse(data);

            var resultHtml = '';

            $.each(data_parsed, function(i, el) 
            {
                if(el.id_user === id_user)
                {
                    resultHtml += "<a href='http://localhost/laravel/public/index.php/utente/" + id_user + "' style='font-weight: bold;'>" + username + "</a> " + el.contenuto + "<br />";
                }
                else
                {
                    resultHtml += "<a href='http://localhost/laravel/public/index.php/utente/" + el.id_user + "' style='font-weight: bold;'>" + username_utente + "</a> " + el.contenuto + "<br />";
                }
            });

            $(".stampa-messaggi").html(resultHtml).show();

        });
    }, 2000);    
});

Check this one out : http://stackoverflow.com/questions/1795100/how-to-exit-from-setinterval-in-jquery — ovesco, Nov 17 '14 at 10:41
This is what you can do: http://stackoverflow.com/a/8345837/2407212 — Jonathan, Nov 17 '14 at 10:43

Magicprog.fr · Accepted Answer · 2014-11-17T11:05:21.610

3

Create a var for your interval:

var myInterval = setInterval(function(){/*...*/}, 2000);

And then use clearInterval to stop it:

clearInterval(myInterval);

To clear the interval with a click on a button:

$('#buttonID').on("click", function() {
    if (typeof myInterval != 'undefined') clearTimeout(myInterval);
});

edited Nov 17 '14 at 11:05

answered Nov 17 '14 at 10:44

Magicprog.fr

4,072
4
26
35

Ok, thank you. I want to stop it onClick of a button. – Francesco Nov 17 '14 at 10:50

score 2 · Answer 2 · answered Nov 17 '14 at 10:50

If your AJAX request fails or is prolonged for any reason, setInterval() will keep making a new request.

Since you are making an AJAX request every so often, what you should be doing is using setTimeout() within the callback function, which will make a new request only when the last is complete. You can place your code in a function and call this function with each timeout.

You can store your timeout in a variable in an accessible scope and then clear it on the click of a button:

var myTimeout = undefined,
    getData = function () {
    $.get("//localhost/laravel/public/index.php/stampa_messaggi/" + id,
    function (data) {
        data_parsed = JSON.parse(data);

        var resultHtml = '';

        $.each(data_parsed, function (i, el) {
            if (el.id_user === id_user) {
                resultHtml += "<a href='http://localhost/laravel/public/index.php/utente/" + id_user + "' style='font-weight: bold;'>" + username + "</a> " + el.contenuto + "<br />";
            } else {
                resultHtml += "<a href='http://localhost/laravel/public/index.php/utente/" + el.id_user + "' style='font-weight: bold;'>" + username_utente + "</a> " + el.contenuto + "<br />";
            }
        });
        $(".stampa-messaggi").html(resultHtml).show();

        myTimeout = setTimeout(getData, 2000);
    });
}

$(".scrivi-messaggio").click(function () {
    var username_utente = $('#username-utente').val();
    $('.modal-title').html('Chat di ' + username_chat);
    getData();    
});

$('button').click(function(){
    if(typeof myTimeout != 'undefined') clearTimeout(myTimeout);
});

score 0 · Answer 3 · answered Nov 17 '14 at 10:44

0

setInterval returns
An integer with the ID value of the timer that is set. Use this value with the clearInterval() method to cancel the timer. ref

so you can use clearInterval passing this ID as parameter ref

answered Nov 17 '14 at 10:44

bemol

381
3
18

score 0 · Answer 4 · answered Nov 17 '14 at 10:50

setInterval() returns some descriptor called intervalId that can be passed to clearInterval' stop the interval associated with it! There for you should assign the return value ofsetInteval()` to a variable.

var intervalId
//declare it outside the click scope so that you can access it later
$(".scrivi-messaggio").click(function()
{         
    var username_utente = $('#username-utente').val();    
    $('.modal-title').html('Chat di '+username_chat);

    intervalId = setInterval(function(){/*What ever the function does*/}, 2000);    
});

and to stop the interval later you can use clearInterval(intervalId) Hope this helps!

Stop setInterval in AJAX JQuery

4 Answers4