2014-11-02 105 views
0

我有以下$ .each循环一个对象。每5秒调用一次get_file()函数。是否有包含暂停和恢复选项。所以,如果我点击暂停数据加载停止。当然,当我点击一个继续按钮时,它会从停止的地方再次启动。在一个循环中暂停和恢复setTimeout

希望有人能帮忙。

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

}); 
+0

的[创建在JavaScript在while循环中的暂停(http://stackoverflow.com/questions/4548034/create-a可能重复-duse-while-loop-in-javascript) – bencripps 2014-11-02 04:02:11

回答

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

打算给这个旋转...... – Rob 2014-11-02 04:35:01

+0

当使用这个你需要重置curfiles = 0重新启动的东西。还有一个额外的分号...}},5000 *(i - curfile + 1)); });应该是这个},5000 *(i - curfile + 1)); }),然后它是完美的! – Rob 2014-11-02 04:55:57

0

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

这个故事假设一个定时器已经设置为setTimeout(),暂停应该防止定时器发射。

参见setTimeout

+0

不幸的是,clearTimeout什么都不做,因为循环加载,然后每5秒触发一次该函数。当你调用clearTimeout时,没有什么可以清除的。 – Rob 2014-11-02 04:09:46

+0

@rob您的代码显示您正在设置一个计时器5秒钟。当它发射时,我会假设你会在5秒后再次启动它。如果你想暂停这一点,那么你会取消定时器开火。由于它不会再次启动,因此不会再重新启动......因此我们会实现暂停。 – Kolban 2014-11-02 04:20:49

+0

他设置了N个不同的定时器,每个定时器相距5秒。每一个从'obj'数组加载一个不同的文件。 – Barmar 2014-11-02 04:24:26

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