Question

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

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

第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”，这是数组的最佳实践）

使用jquery load（）时setTimeout重叠

1 个答案: