启动多个setInterval失败

Fail to launch multiple setInterval

本文关键字：失败 setInterval 启动      更新时间：2023-09-26

我正在构建一个函数来定期更新HTML节点的后台位置。该函数适用于单个节点，但在多个节点上调用时(在下面的示例中)，只有最后一个节点受此函数的影响。

根据函数中的alert(index)，对每个节点调用setInverval()。

我不明白为什么它不生效。

http://jsfiddle.net/GqNgs/1/

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);

你的变量thisNode是全局的，所以一旦你执行你的函数，你快速循环通过所有三个元素(你称之为节点)，但当这完成后，所有三个函数将执行间隔将引用单个元素(因此只有一个将被改变，你的警报显示给你正确的答案，因为每个警报引用不同的和正确的范围index值)。

简单修复，修改:

thisNode = $(node);

: 

var thisNode = $(node);
http://jsfiddle.net/GqNgs/2/

顺便说一句，只设置一个间隔函数可能会更具可伸缩性，并且每次调用它时都会在所有元素上移动背景(或进行任何您想要的操作)，而不是为每个元素设置间隔。

这是因为你迭代nodeList和你分配thisNode每次，然后你把它传递给间隔。但是发生的是thisNode被重写了三次(在循环之后，它指的是最后一个节点)和 after 三个间隔都用相同的thisNode变量执行，此时是最后一个节点。

相关文章：