JavaScript setTimeout() 重复

Question

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

第一个脚本

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

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

这很好用，但问题是当网站处于活动状态时，如果连接速度较慢，则背景图片无法及时加载以进行下一次计时器更改。

新脚本

所以新版本：

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

var theTimer = setTimeout(backgroundChange, 7000);

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

window.clearTimeout(theTimer);

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

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

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

});

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

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

非常喜欢。

Answer 1

您可以为计时器函数使用 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);
    });
});

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

Answer 2

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

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