Question

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

根据函数中的 alert（index），为每个节点调用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);

Answer 1

你的变量thisNode是全局变量，所以一旦你执行了你的函数，你就会快速遍历所有三个元素（你称之为节点），但是当这个元素完成后，将在这个时间间隔执行的所有三个函数都会引用单个元素（因此只有一个元素会更改，警报显示正确答案的事实是因为每个警报都引用了不同且正确范围的index值。< / p>

简单修复，更改：

thisNode = $(node);

为：

var thisNode = $(node);

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

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

Answer 2

这是因为你每次迭代nodeList并且你每次都指定 thisNode ，然后你将它传递给间隔。但是会发生的事情是 thisNode 三次重写（在循环后它引用最后一个节点）和 AFTER 三个时间间隔都是使用相同的 thisNode执行的此变量目前是最后一个节点。

无法启动多个setInterval

2 个答案: