Pause & Resume setTimeout in a loop

Question

I have the following $.each which loops through an object. Every 5 seconds the get_file() function is called. Is there anyway to include a Pause and Resume option. So that if I click Pause the loading of the data stops. And of course when I click a Resume button it starts up again from where it left off.

Hope someone can help.

$.each(obj, function (i, v) {

   setTimeout(function () {
     file = v.new_file;
     var timeline_date = moment(v.last_modified_date).format("dddd, MMMM Do YYYY, h:mm:ss a");
     bHover = 0; //re-highlight links
     $(".timeline_msg").html(timeline_date);
     get_file(file);
   }, 5000 * (i + 1));

});

possible duplicate of [Create a pause inside a while loop in javascript](http://stackoverflow.com/questions/4548034/create-a-pause-inside-a-while-loop-in-javascript) — bencripps, Nov 02 '14 at 04:02

Barmar · Accepted Answer · 2014-11-02T05:05:29.743

Make an array of all the timers, so you can clear them when the pause button is clicked. Use a global variable to keep track of how far you are through the list of files to load. Then you can resume from where you left off.

var curfile = 0;
var load_file_timers;

function load_files() {
    load_file_timers = obj.map(function(v, i) {
        if (i < curfile) {
            return null;
        } else {
            return setTimeout(function() {
                var file = v.newfile;
                var timeline_date = moment(v.last_modified_date).format("dddd, MMMM Do YYYY, h:mm:ss a");
                bHover = 0; //re-highlight links
                $(".timeline_msg").html(timeline_date);
                get_file(file);
                curfile++;
            }, 5000 * (i - curfile + 1));
        }
    });
}

load_files();

$("#pause").click(function() {
    $.each(load_file_timers, function(i, timer) {
        if (timer) {
            clearTimeout(timer);
        }
    });
});

$("#resume").click(load_files);

when using this you need to reset curfiles = 0 to restart things. there is an extra semi colon...this }, 5000 * (i - curfile + 1)); }); should be this }, 5000 * (i - curfile + 1)); }) and then it's perfect! — Rob, Nov 02 '14 at 04:55

Kolban · Answer 2 · 2014-11-02T04:19:22.937

0

When you call setTimeout() you are returned a handle to that timer which can then be passed to a call to clearTimeout(). This will cancel the subsequent firing of the timer (assuming it hasn't already fired). This can be code associated with a "Pause" option. When you want to resume, you could simply execute the same setTimeout() code again to resume the timer for the next interval.

This story presumes that a timer has been setup with setTimeout() and that a pause should prevent the timer from firing.

See setTimeout.

edited Nov 02 '14 at 04:19

answered Nov 02 '14 at 04:04

Kolban

13,794
3
38
60

Unfortunately the clearTimeout does nothing because the loop loads and then fires each call to the function every 5 seconds. When you call clearTimeout there is nothing to clear. – Rob Nov 02 '14 at 04:09
@rob Your code shows that you are setting a timer for 5 seconds. When it fires, I would assume that you would set it up to fire again 5 seconds later. If you want to pause this, then you would cancel the timer from firing. Since it doesn't fire again, it won't restart again ... and hence we would have achieved a suspension. – Kolban Nov 02 '14 at 04:20
He's setting N different timers, which each fire 5 seconds apart. Each one loads a different file from the `obj` array. – Barmar Nov 02 '14 at 04:24

score 0 · Answer 3 · answered Nov 02 '14 at 08:45

A recursive solution for this is,

var array = $.map(obj,function(v,i){
    return v;
});

var timer;
var fileId=0;

function execute(){
     timer = setTimeout(function () {
               v = array[fileId];
               var file = v.newfile;
               var timeline_date = moment(v.last_modified_date).format("dddd, MMMM Do YYYY, h:mm:ss a");
               bHover = 0; //re-highlight links
               $(".timeline_msg").html(timeline_date);
               get_file(file);
               fileId++;
               if (array.length > fileId){
                   execute();
               }
           }, 1000);
}

$('document').ready(function(){

    $('#loop_controler').click(function(){
        if (fileId < array.length){
            if ($(this).text() == 'pause'){
              clearTimeout(timer);
              $(this).text('resume');
            } else {
              execute();
              $(this).text('pause');
            }
        }
    });

    execute(array,0);
});

Pause & Resume setTimeout in a loop

3 Answers3

Linked