CODEWITHSUNDEEP
javascriptjqueryajaxsetinterval
katze
katze

Reputation: 1343

Abort Interval when states finished Javascript

I'm trying to abort my Interval when all states I get from requests are in a state called "success". The Interval is correctly stopped but it seems that that they are stopped too soon, I'm not a Javascript expert so my code must have issues, do someone see if there is a synchronization problem between the $get request and the calcul of "success"?

var tid = setInterval(update_status, 2000);

function update_status(){

    var task_table = $("#task_table");
    var task_table_rows = $(task_table).find('tr');
    var task_table_length = task_table_rows.length;
    var id_table = [];
    var state_counter = 0;

    //Get id's of the visible table and stock them in id_table

    for(var i = 0; i<task_table_rows.length;i++){

        id_table.push(task_table_rows[i].id);

    }

    //Make the request and update the task state_counter

    for(var i = 1; i<id_table.length; i++){

        state_counter = change_state(i, task_table_rows[i], state_counter);

    }

    //Calcul the max number of task which can became in the state "success"

    var max_number_success = id_table.length - 1;

    //If the number of "success" is the number of tasks then stop the Interval

    if (state_counter == max_number_success){

        abortTimer();

    }



    function change_state(i, task_table_row, state_counter){

        $.get( "/task/id="+id_table[i]).done(function(data){

            task_status = data["task"]["status"];

            //Change HTML class here and others stuff...

        });

        if(task_status == 2){
            return (state_counter + 1);
        }else{
            return state_counter;
        }


    }

    function abortTimer(){
        clearInterval(tid);
    }

}

Thank you.

Upvotes: 1

Views: 68

Answers (1)

dfsq
dfsq

Reputation: 193291

You need to change the way you think about the problem. Since you are making AJAX calls you can't just return from it. Instead you have to provide a callback mechanism to be executed when response is ready. Take a look at this modified (changed part) version of your code:

// Calculate the max number of task which can became in the state "success"
var max_number_success = id_table.length - 1;

// Make the request and update the task state_counter
for (var i = 1; i < id_table.length; i++) {
    change_state(i, task_table_rows[i], state_counter, function (count) {

        state_counter += count;

        // If the number of "success" is the number of tasks then stop the Interval
        if (state_counter == max_number_success) {
            abortTimer();
        }
    });
}

function change_state(i, task_table_row, state_counter, callback) {
    $.get("/task/id=" + id_table[i]).done(function (data) {
        task_status = data["task"]["status"];
        callback(task_status == 2 ? 1 : 0);
    });
}

Note how you use new callback parameter in change_state function, and how you provide an anonimous function to change_state invocation in loop.

Upvotes: 1

Related Questions