启动多个setInterval失败
我正在构建一个函数来定期更新 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);
I am building a function to update a HTML node's background position at a regular basis. The function works for a single node, but when called upon multiple node (in the following example), only the last node is affected by this function.
According to the alert(index) within the function, setInverval() is called for each node.
I cannot figure out why it doesn't take effect.
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);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的变量
thisNode是全局的，因此一旦您执行函数，您将快速循环遍历所有三个元素（您称为节点），但是完成后，将在该时间间隔执行的所有三个函数都将引用单个元素（因此只有那个元素会被更改，您的警报向您显示正确答案的事实是因为每个警报引用了不同且范围正确的index值）。简单修复，更改
为：
http://jsfiddle.net/GqNgs/2/
，仅设置一个间隔函数可能更具可扩展性，并且每次调用它时都会在所有元素上移动背景（或进行任何您想要的操作），而不是为每个元素设置一个间隔。
Your variable
thisNodeis global, so once you execute your function you quickly loop through all three elements (what you call nodes), but when that's done, all three functions that will execute at the interval will refer to a single element (and therefore only that one will be changed, the fact that your alerts showed you the correct answer, is because each alert references a differently and correctly scopedindexvalue).Simple fix, change:
to:
http://jsfiddle.net/GqNgs/2/
As an aside, it would probably be more scalable to set only one interval function, and each time it's called move the background (or do whatever manipulation you want) on all elements, rather than an interval for each element.
这是因为您迭代nodeList并每次分配thisNode，然后将其传递给间隔。但发生的情况是，thisNode 被重写了三次（在循环之后它引用了最后一个节点），并且之后这三个间隔都使用相同的 thisNode 执行 变量目前是最后一个节点。
It is because of you iterate nodeList and you ASSIGN thisNode each time and then you pass it to the interval. But what happens is that thisNode is three times rewrited (after the loop it reffers to the LAST node) and AFTER that three intervals are executed all with the same thisNode variable which at the moment is the LAST node.