setTimeout 在使用 jquery load() 时重叠

Question

我有一组页面充当幻灯片，其中不同的元素被定时显示为录制的画外音朗读文本。

当我使用 load（） 用下一个"幻灯片"刷新该区域时，我遇到了麻烦。我正在使用 setTimeout 来控制显示。我的问题是第二页正在使用第一页中找到的 setTimeout 计时。我需要清除超时吗？

第 1 页脚本：

var actions = [
  { time : 4, action : function() { $('#slidePhoto').animate({width: $('#slidePhoto img').width() / 1.5}, 2000 ).addClass('side-photo') } },
  { time : 8, action : function() { $('#slideEl2').fadeIn('slow') } },
  { time : 17, action : function() { $('#slideEl3').fadeIn('slow') } },
  { time : 24, action : function() { $('#slide-container').hide('slide', { direction: "left"}, 1000, function () {
      $('#slide-container').load('introduction2.php', function() {
        $('#slide-container').fadeIn('slow');
      });
    } ) } }
];
$(document).ready(function() {
  for( var i in actions ) {
    setTimeout( actions[i].action, actions[i].time * 1000 );
  }
});

第 2 页脚本：

var actions = [
  { time : 10, action : function() { $('#slidePhoto').animate({width: $('#slidePhoto img').width() / 1.5}, 2000 ).addClass('side-photo') } },
  { time : 16, action : function() { $('#slideEl2').fadeIn('slow') } },
  { time : 29, action : function() { $('#slideEl3').fadeIn('slow') } },
  { time : 40, action : function() { $('#slide-container').hide('slide', { direction: "left"}, 1000, function () {
      $('#slide-container').load('introduction3.php', function() {
        $('#slide-container').fadeIn('slow');
      });
    } ) } }
];
$(document).ready(function() {
  for( var i in actions ) {
    setTimeout( actions[i].action, actions[i].time * 1000 );
  }
});

页面在主容器页面上的区域内加载。我相信我可以通过在每一页上使用不同的 ID 来解决这个问题，但我猜还有更简单的事情。

Answer 1

您需要注册用作 clearTimeout 函数参数的计时器 ID。

例如，在创建超时时：

for( var i=0; i<actions.length; i++ ) {
    actions[i].timeout = setTimeout( actions[i].action, actions[i].time * 1000 );
}

然后清除它们：

for( var i=0; i<actions.length; i++ ) {
    clearTimeout(actions[i].timeout);
}

（我用动作长度的标准迭代替换了你的"for var i in"，这是数组的最佳实践）