无法启动多个setInterval

我正在构建一个函数来定期更新HTML节点的背景位置。该函数适用于单个节点，但在多节点上调用时（在以下示例中），只有最后一个节点受此函数影响。无法启动多个setInterval

根据函数内的警报（索引），为每个节点调用setInverval（）。我想不出为什么它不生效。

var bgImgAnimate = function (settings) { 
    $.each(settings.nodeList, function (index, node) { 
     thisNode = $(node); 

     var thisPosition; 

     setInterval(function() { 
        alert(index); 
     //calculate the position before position the image 

      thisPosition = - settings.frameWidth * settings.currentFrame; 

      thisNode.css('backgroundPosition', (thisPosition + 'px') + ' ' + (settings.verticalPos + 'px')); 


     }, settings.interval);  
    }); 


}; 

var settings = { 
    nodeList: $('#star1, #star2, #star3'), 
    verticalPos: 0, 
    currentFrame: 1, 
    frameWidth: 26, 
    startTime: 2, 
    frameNumber: 10, 
    interval: 200 
} 

bgImgAnimate(settings);

来源

2011-09-27 steveyang

你的变量thisNode是全球性的，所以一旦您完成所有三个要素执行的功能可以快速环路（你所谓的节点），但如果这样做了，所有的三种功能，将在执行间隔将指代单个元素（因此只有那一个将被更改，事实上，您的警报向您显示正确的答案，是因为每个警报引用的值不同且范围正确index值）。

简单的修复，改变：

thisNode = $(node);

到：

var thisNode = $(node);

http://jsfiddle.net/GqNgs/2/

顺便说一句，它很可能是更具可扩展性，以只设定一个间隔功能，每一次它被称为在所有元素上移动背景（或者做任何你想要的操作），而不是每个元素的间隔。

来源

2011-09-27 07:20:51 davin

这是因为你每次迭代nodeList和你ASSIGN thisNode然后你将它传递给间隔。但是，什么情况是，thisNode是rewrited三次（循环后reffers到最后一个节点）和AFTER这三个区间与同一thisNode变量这在目前是最后一个节点的所有执行。

来源

2011-09-27 07:21:27

无法启动多个setInterval

回答

相关问题