JavaScript setTimeout()重复

Question

我对JavaScript/jQuery相当陌生，但我已经编写了一个脚本来更改背景图片。

第一脚本

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

• 创建一个setInterval计时器，它每7秒调用函数backgroundChange()来运行一次
• 决定下一张图片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函数中，定时器现在似乎都被调用了一倍。

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

阿塔非常喜欢。

Answer 1

在添加下一个加载处理程序之前，您需要解除对其的绑定，因为随着代码的运行，加载处理程序会不断堆积。每次迭代时，都会添加一个额外的处理程序来完成完全相同的任务。在重新附加之前，使用unbind删除旧的处理程序：

$('#testImage').unbind('load');

Answer 2

您可以使用一个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);
    });
});

不应该需要清除或设置您代码中其他任何位置的计时器。