Javascript multiple setIntervals

Question

I have a scenario where i have one setInterval based code checking for value of an ajax call return. Like so:

var processInterval = setInterval(function () {

    var processResult = getVideoStatus(data.file_name);

    console.log(processResult);

    if (processResult === "ready") {

        clearInterval(processInterval);
        //Logic

    }

}, 1000);

As for the getVideoStatus function, here it is:

var getVideoStatus = function () {

    var result = null;
    jQuery.ajax({
        url: 'someurl',
        type: 'GET',
        dataType: 'html',
        success: function (response) {

            result = response;

        }
    });

    var statusTimeout = setInterval(function () {

        if (result != null) {

            clearInterval(statusTimeout);
            alert(result);
            return result;

        }

    }, 100);


}

What i tried to do in getVideoStatus function is for it to return value only when ajax call is completed and result is not null. I see that it does returns/alerts correct value but when i try to console.log(processResult) , it does not log anything at all.

I think it has something to do with first interval because the getVideoStatus seems to return value alright. Is there any logic issue?

Answer 1

The approach you have chosen is not ideal to say less. Just use proper Promise/thenable API which is available for providing callback when data is available. In your case:

var getVideoStatus = function () {
    return jQuery.ajax({
        url: 'someurl',
        type: 'GET',
        dataType: 'html'
    });
}

getVideoStatus().then(function(result) {
    console.log(result);
});

Benefits: cleaner and more predictable code behavior.

Answer 2

Your problem is getVideoStatus does not return anything. So this code:

var processResult = getVideoStatus(data.file_name);

Is not working as you expect. There is a better way to do what you want. It is to use jQuery Deferreds like so:

var getVideoStatus = function(){
return jQuery.ajax({
    url : 'someurl',
    type: 'GET',
    dataType: 'html',
    success : function (response) {

        result =  response;

    }
  });
}

var deferred = getVideoStatus(data.file_name);

deferred.then(
  function success(data) {
    // do something here, call came back w/ data
  },
  function error() {
    // handle error
  }
);

The thing you are not getting is that an AJAX request is asynchronous. The code will not continue running step by step -- instead, the browser will run the request and then come back and you can continue running but it won't be back in the same place that you started the request.

You can get something like that to work but nobody who uses jQuery would do that and it is complicated -- you need to use setInterval and check the ready state of the XHR request. jQuery does all that for you. So start with that and then go read how it works if you want to implement your own.