javascript - 循环中暂停和恢复 setTimeout

Question

我有以下 $.each 循环遍历一个对象。每 5 秒调用一次 get_file() 函数。是否有包含暂停和恢复选项。这样，如果我单击“暂停”，数据加载就会停止。当然，当我单击“恢复”按钮时，它会从上次停止的位置重新启动。

希望有人能帮忙。

$.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));

});

Answer 1

创建一个包含所有计时器的数组，以便您可以在单击暂停按钮时清除它们。使用全局变量来跟踪要加载的文件列表的进度。然后您可以从上次中断的地方继续。

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);