setInterval and Ajax

Question

I have this problem when I use setInterval and ajax for retrieving data from the database and if the data that I retrieve from the database is equal to saveHere then it will loop again until it does not match the variable saveHere, it freeze the browser until the data that I retrieve is not equal to saveHere.

Here is an example:

var saveHere = 'RED';
var interval = setInterval(function() {

    var sample = $.ajax({
        type: 'GET',
        url: 'database.php',
        data : data
    }).responseText;

    if (sample != 'RED') {
        clearInterval(interval);
        saveHere = sample;
    }
    else {
        console.log('load again');
    }

},1000);

I really need advice. Thank you in advance. Sorry for the grammar.

What exactly are you trying to do? There might be a more elegant way of achieving your ultimate goals :) — Chris Kempen, Sep 17 '13 at 08:04
I want advice, because this code make the browser freeze and I cant even click a button until it find that the data I'm retrieving is not equal to saveHere. Thanks for reply. — reyes, Sep 17 '13 at 08:07

Markus Hedlund · Answer 1 · 2013-09-17T08:23:11.637

7

$.ajax is asynchronous and requires you to use a callback to get the response text.

Take a look at the documentation at http://api.jquery.com/jQuery.ajax/

What you want to do is to add a success parameter. Something like this:

var saveHere = 'RED';

doAjax();

function doAjax() {

    $.ajax({
        type: 'GET',
        url: 'database.php',
        data: data,
        success: function (sample) {
            if (sample != 'RED') {
                saveHere = sample;
            } else {
                console.log('load again');
                doAjax();
            }
        }
    });

}

Notice how I've removed setInterval and instead wrapped the Ajax code in a function. The success callback will be called when the Ajax query has successfully finished, and give you the response. Once we have evaluated the response, we can run the doAjax function again to run the query again.

edited Sep 17 '13 at 08:23

answered Sep 17 '13 at 08:10

Markus Hedlund

23,374
22
80
109

1

This might get a bit harsh on the server without a setTimeout on the recall to doAjax to space the requests out a bit. – Jon Egerton Sep 17 '13 at 08:13
thanks for the advice sir, i think the problem in my program is that it use setInterval and it freeze the browser. – reyes Sep 17 '13 at 08:15
Good point on the asynchronous nature of `$.ajax`...don't you need to call `doAjax()` initially though? – Chris Kempen Sep 17 '13 at 08:20
Haaha I did the exact same thing! ;D – Chris Kempen Sep 17 '13 at 08:51

Chris Kempen · Accepted Answer · 2013-09-17T08:17:20.290

2

Without knowing the exact scenario, or what you're looking to achieve, I'd say the way you're going about your AJAX calls is very dangerous as it has the potential to constantly make a request every second, regardless of whether the server has had a chance to respond yet.

I'd be tempted to only make one request at a time, something like:

var saveHere = 'RED';
makeAjaxCall();

function makeAjaxCall() {
    var url = 'database.php';
    var data = {};
    $.get(url, data, function(response_text){
        if (response_text != 'RED')
        {
            saveHere = response_text;
            // do whatever else you need...
        }
        else
        {
            // make another call...
            console.log('calling again...');
            makeAjaxCall();
        }
    }, "text");
}

edited Sep 17 '13 at 08:17

answered Sep 17 '13 at 08:11

Chris Kempen

9,491
5
40
52

Thank you for your reply sir @chris, the problem is that when i use that code it freeze the browser. – reyes Sep 17 '13 at 08:13
Are you referring to the code sample I suggested @reyes? I fixed the code above to actually call the function this time >__O – Chris Kempen Sep 17 '13 at 08:17
no sir, Im sorry, my code i mean. but i want to ask if this code can make the brower freeze. – reyes Sep 17 '13 at 08:17
No, it shouldn't, as it's not making use of the asynchronous `$.ajax` call, it should run silently in the background until `response_text` is equal to `'RED'`... – Chris Kempen Sep 17 '13 at 08:19
sir @Chris, I'll try it later, i forgot to bring my laptop, its for my thesis and it is very helpful, thank you. last question, when it loop and loop again thus it freeze the browser. – reyes Sep 17 '13 at 08:26
It won't freeze the browser because the AJAX request is being made in the background, and it will only call itself after a successful AJAX call has been completed and only if your response text is `'RED'`...I hope this makes sense? – Chris Kempen Sep 17 '13 at 08:53

score 0 · Answer 3 · answered Sep 17 '13 at 08:04

0

You are clearing interval that means no interval will occur after that.

Instead what you can do is wrap interval inner code inside if condition as below.

var interval = setInterval(function()
{
    if(sample != 'RED') {
        var sample = $.ajax({
            type: 'GET',
            url: 'database.php',
            data : data
        }).responseText;

    saveHere = sample;
    }
    else
    {
        console.log('load again');
    }
},1000);

answered Sep 17 '13 at 08:04

Dipesh Parmar

27,090
8
61
90

I use clearInterval so that when it finish retrieving data from the database it wont freeze. – reyes Sep 17 '13 at 08:09

score 0 · Answer 4 · answered Sep 17 '13 at 08:06

0

In your code you test for not equal to 'RED'.

if(sample != 'RED'){ . . .

That part of the loops stops the interval

If it doesn't equal red

}else{

It simple logs 'load again' without clearing the interval

What exactly are you trying to achieve ?

answered Sep 17 '13 at 08:06

Pat Dobson

3,249
2
19
32

That's how the OP described it: "is equal to saveHere then it will loop again" – Jon Egerton Sep 17 '13 at 08:09
yes sir, because I'm making a board game, when i finish moving I'll go to this code to find if the other player move, sorry for not mentioning it. thanks for the reply – reyes Sep 17 '13 at 08:11

setInterval and Ajax

4 Answers4

Linked