2

我对 JavaScript/jQuery 还很陌生，但是已经制作了一个脚本来更改背景图片。

第一个脚本

第一个脚本版本运行良好，并执行以下操作：

  • 创建一个 setInterval 计时器，它调用函数 backgroundChange() 每 7 秒运行一次
  • 决定下一张图片URL
  • 设置背景图片

这很好用，但问题是当网站处于活动状态时，在连接速度较慢的情况下，背景图片不会及时加载以进行下一次计时器更改。

新脚本

所以新版本：

  • 创建一个 setTimeout 计时器，该计时器调用函数 backgroundChange() 以在 7 秒后运行

var theTimer = setTimeout(backgroundChange, 7000);

  • clearsTimeout （当然我不应该运行这个？）

window.clearTimeout(theTimer);

  • 决定下一张图片URL
  • 等到图片加载完毕：
  • 然后设置背景图片
  • 然后添加一个新的 setTimeout 计时器

$('#testImage').attr('src', imageText).load(function() {

    $('#backgroundTop').fadeIn(timeIn,function() 
    {
         theTimer = setTimeout(backgroundTimer, 7000);
    });

});

问题是，每当计时器运行并存在于 .load 函数中时，计时器现在似乎被调用了两倍的次数。

我还没有故意不发布我的代码，因为我想首先确保我的理解是正确的，而不是有人只是修复我的代码。

太极了。

4

2 回答 2

3

您可以为计时器函数使用 JavaScript 闭包，而不是取消绑定。这将维护一个每次调用时都会重置的计时器。

var slideTimer = (function(){
      var timer = 0;

      // Because the inner function is bound to the slideTimer variable,
      // it will remain in score and will allow the timer variable to be manipulated.

      return function(callback, ms){
           clearTimeout (timer);
           timer = setTimeout(callback, ms);
      };  
})();

然后在您的代码中：

$('#testImage').attr('src', imageText).load(function() {

    $('#backgroundTop').fadeIn(timeIn,function() 
    {
         slideTimer(backgroundTimer, 7000);
    });
});

不需要在代码中的其他任何地方清除或设置计时器。

于 2013-01-20T14:02:01.913 回答
2

在添加下一个负载处理程序之前，您需要取消绑定负载处理程序，因为它们会随着您的代码而不断堆积。在每次迭代中，您都会添加一个额外的处理程序来执行完全相同的操作。用于unbind在重新附加之前删除旧处理程序：

$('#testImage').unbind('load');
于 2013-01-20T13:57:30.270 回答