CODEWITHSUNDEEP
javascriptdomclosuressetinterval
Pitchkrak
Pitchkrak

Reputation: 370

setInterval Returning Value

I am working with a setInveral function and I would like to access the value that have been calculated during the interval and return them later.

The function itself, look if an element is finished to load (through Ajax) for a number of time and then return the JSON parse of that element if it is finished (or return blank). It is possible that the element is finished loaded after 200ms or 1s. In order to be the quickest possible, I am actually using setInterval.

My function look like this : 

window.ObjectBuilding = function (id){ /*function to check the element & 
return Object*/
/*Set max number of loop*/
var dl_cap = 5;
/*Set the intervals (in milliseconds) on how often to execute the code*/
var dl_int = 200;
/*Counter*/
var check_dl_inc = 0;
/*initiate global var*/
window.temp_object='';
check = setInterval(function(){
    el = window.document.getElementById(id);
    if(el){
        if(el.innerHTML.length > 50){
            /*Object ready*/
            temp_object= JSON.parse(el.innerHTML);
            clearInterval(check);
        }else{
            /*Oject not yet ready*/
            check_dl_inc++;
            if(check_dl_inc == dl_cap){
                temp_object= "";
                clearInterval(check );
                }
        }
    }else{
        /*Missing Dom element*/
        temp_object= "";
        clearInterval(check );
    }
}, dl_int);
return temp_object
}

The idea is to then use this object to a multiple place on my website such as : object = ObjectBuilding('myID')

The problem I encounter is that the temp_object is never updated with the latest value. It always remain as the initial state.

I think this is a closure thing but I didn't find a way to get around it. The SetInterval return value is the ID of the temporal object so I cannot get that.

Upvotes: 0

Views: 3010

Answers (2)

Alex Maximenko
Alex Maximenko

Reputation: 121

I think good idea to use Promises.

let promise = new Promise(function(resolve){

   let check = setInterval(function(){
      el = window.document.getElementById(id);
      if(el){
         if(el.innerHTML.length > 50){
            /*Object ready*/
            temp_object= JSON.parse(el.innerHTML);
            clearInterval(check);
            resolve(temp_object);

            ...

});

promise.then(function(temp_object){
    // Do all yuor needs here
    console.log(temp_object);
});

All modern browsers supports Promises 'in box'. Or you can use Bluebird to support older versions. You also can use promise rejecton after few cycles.

Without Promise you just can use callback to function that make all work letter.

Upvotes: 2

Peter
Peter

Reputation: 1046

You are returning temp_object, but the timer starts and executes later. So the return value is still an empty string when you return it.

If you want to update your page then call a function instead of trying to return:

function updateMyPage(temp_object) { 
    // update your page here, now you have the updated value in temp_object
}

window.ObjectBuilding = function (id){ /*function to check the element & 
return Object*/
/*Set max number of loop*/
var dl_cap = 5;
/*Set the intervals (in milliseconds) on how often to execute the code*/
var dl_int = 200;
/*Counter*/
var check_dl_inc = 0;
/*initiate global var*/
check = setInterval(function(){
    el = window.document.getElementById(id);
    if(el){
        if(el.innerHTML.length > 50){
            /*Object ready*/
            updateMyPage(JSON.parse(el.innerHTML));
            clearInterval(check);
        }else{
            /*Oject not yet ready*/
            check_dl_inc++;
            if(check_dl_inc == dl_cap){
                updateMyPage("");
                clearInterval(check );
                }
        }
    }else{
        /*Missing Dom element*/
        updateMyPage("");
        clearInterval(check );
    }
}, dl_int);
}

Upvotes: 0

Related Questions