暂停&在循环中恢复setTimeout

时间:2014-11-02 04:00:54

标签: javascript jquery

我有以下$ .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));

});

3 个答案:

答案 0 :(得分:2)

创建所有计时器的数组,以便在单击暂停按钮时清除它们。使用全局变量来跟踪要加载的文件列表的距离。然后你可以从你离开的地方继续。

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

答案 1 :(得分:0)

当您致电setTimeout()时,系统会返回计时器的句柄,然后该计时器可以传递给clearTimeout()。这将取消计时器的后续触发(假设它尚未触发)。这可以是与“暂停”选项相关联的代码。当您想要恢复时,您可以再次执行相同的setTimeout()代码以恢复下一个间隔的计时器。

这个故事假定已经设置了一个定时器setTimeout(),暂停应该阻止计时器开火。

请参阅setTimeout

答案 2 :(得分:0)

这个的递归解决方案是,

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