javascript - 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.

Answer 1

$.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.