0

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

当我使用 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 来解决这个问题，但我猜有一些更容易的事情。

4

1 回答 1

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

于 2012-05-01T07:04:32.333 回答