Update Javascript Timer Interval periodically

Question

I am creating a javascript function to show the status of a running task [ which will run in every 1 hour and it took some time for completion] This function will give an idea to end user that the task is currently running or not

To do this on load event i created a function and set an interval of 10 minutes to that So every 10 minutes it will tell user the status of task

In case if task is found as running on server i would like to reduce the interval to 1 minute . SO as soon as task is finished users will get an idea and they can restart using the web portal. And once its detected as not running would like to revert the interval back to old 10 minute again.

Current implementation is like below

       $(function () {           
            loadSyncStatus();
            setInterval(function () {
                // Invoke function every 10 minutes (600000)
                loadSyncStatus();
            }, 600000);
        
        });
    
    function loadSyncStatus() {
        var action_url = '@Url.Content("~/Controller/GetSyncStatus")';             
        $.ajax({
            url: action_url,
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (response) {                    
                   $("#dataSyncStatus").html(response.message);
                   
                    if(response.running_flag=true){
                      //check the status every 1 minute *****TODO****
                    }
                    else{
                     //reset the interval back to 10 minutes  *****TODO****
                    }                       
                }
        }) 
    }

It's not possible to change the delay of a running interval, you've to clear the original interval, and start a new interval with a new delay value. — Teemu, Nov 26 '20 at 10:20
The first issue is that you throw away what `setInterval()` returns. That would be the ID which you can use to shut down the timer. In its current form it runs forever, hard to imagine how you were satisfied with that. — tevemadar, Nov 26 '20 at 10:23

score 1 · Answer 1 · answered Nov 26 '20 at 10:28

Please try this it will call loadSyncStatus() after 600000

var myTimeOut=0;
    $(function () {     
            loadSyncStatus();
         myTimeOut = setTimeout(loadSyncStatus, 600000);
        });

function loadSyncStatus() {
    clearTimeout(myTimeOut);
    myTimeOut = setTimeout(loadSyncStatus, 600000);
    var action_url = '@Url.Content("~/Controller/GetSyncStatus")';             
    $.ajax({
        url: action_url,
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (response) {                    
               $("#dataSyncStatus").html(response.message);
               
                if(response.running_flag=true){
                  //check the status every 1 minute *****TODO****
                }
                else{
                 //reset the interval back to 10 minutes  *****TODO****
                }                       
            }
    }) 
}

score 0 · Accepted Answer · answered Nov 26 '20 at 10:22

You can use clearInterval based on ids:

let id = setInterval(function () {
 // Invoke function every 10 minutes (600000)
  loadSyncStatus();
}, 600000);

and

if(response.running_flag=true){
  clearInterval(id);
  id = setInterval(loadSyncStatus, 60000);
}
else{
  clearInterval(id);
  id = setInterval(loadSyncStatus, 600000);
}

Update Javascript Timer Interval periodically

2 Answers2