無法啓動多個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

回答

相關問題