jQuery - setInterval issue
jQuery - setInterval issue
我正在使用jQuery生成随机数量的云并将其添加到页面的标题中,并按指定的间隔将它们向左移动。一切正常,每个云的间隔只运行一次,而不是再次运行。这是我的代码:
if(enableClouds) {
var cloudCount = Math.floor(Math.random() * 11); // Random Number between 1 & 10
for(cnt = 0; cnt < cloudCount; cnt++) {
var cloudNumber = Math.floor(Math.random() * 4);
var headerHeight = $('header').height() / 2;
var cloudLeft = Math.floor(Math.random() * docWidth);
var cloudTop = 0;
var thisHeight = 0;
var cloudType = "one";
if(cloudNumber == 2) {
cloudType = "two";
}else if(cloudNumber == 3) {
cloudType = "three";
}
$('header').append('<div id="cloud' + cnt + '" class="cloud ' + cloudType + '"></div>');
thisHeight = $('#cloud' + cnt).height();
headerHeight -= thisHeight;
cloudTop = Math.floor(Math.random() * headerHeight);
$('#cloud' + cnt).css({
'left' : cloudLeft,
'top' : cloudTop
});
setInterval(moveCloud(cnt), 100);
}
function moveCloud(cloud) {
var thisLeft = $('#cloud' + cloud).css('left');
alert(thisLeft);
}
}
任何帮助不胜感激!
这是要走的路:
setInterval((function(i){
return function(){
moveCloud(i);
};
})(cnt), 100);
工程师为您提供了所需的代码。这是正在发生的事情。
setInterval
函数采用函数对象和间隔。函数对象只是一个可以调用的对象,如下所示:
/* Create it */
var func = function() { /* ... blah ... */};
/* Call it */
var returnVal = func(parameters)
这里的对象是 func
.如果你调用它,你得到的是返回值。
因此,在您的代码中:
setInterval(moveCloud(cnt), 100);
您setInterval
输入调用moveCloud(cnt)
的返回值,而不是函数对象moveCloud
。所以那个位被打破了。
不正确的实现是:
for(cnt = 0; cnt < cloudCount; cnt++) {
/* ... other stuff ... */
var interval = setInterval(function() {
moveCloud(cnt);
}, 100);
}
现在,你给它一个函数对象,这是正确的。当调用此函数对象时,它将调用moveCloud
。这里的问题是cnt
.
你在这里创建的是一个闭包。捕获对变量 cnt
的引用。调用传递给setInterval
的函数对象时,它会看到对cnt
的引用并尝试解析它。当它这样做时,它会到达您迭代的变量,查看其值并发现它等于 cloudCount
。问题是,没有映射到您创建的云(您有云 0 到 (cloudCount -1)),所以充其量什么都没有发生,最坏的情况是,你会得到一个错误。
正确的方法是:
setInterval((function(i){
return function(){
moveCloud(i);
};
})(cnt), 100);
这使用返回函数的"即时函数"。您创建一个函数:
function(i){
return function(){
moveCloud(i);
};
}
这将返回另一个函数(我们称之为outer
),当使用该值i
调用时,使用该值调用moveCloud
。然后,我们立即用我们的价值cnt
调用outer
。这给了我们一个函数,当调用该函数时,无论此时cnt
的值是多少,都会调用moveCloud
。这正是我们想要的!
这就是我们这样做的原因。
相关文章:
- issue with FB.Event.subscribe
- node.js:setInterval()正在跳过调用
- setInterval和clearInterval javascript无法按需工作
- Don'我不明白为什么我的setInterval+jQuery;不起作用
- setInterval游戏循环的范围问题
- JavaScript setInterval problems
- 如何在Javascript中延迟setInterval
- 使用Jquery Issue垂直重新排序Divs
- 如何执行相同的setInterval()
- SetInterval在javascript对象中表现怪异
- 从setInterval方法移动到带有sprite的requestAnimationFrame
- 如何在悬停时暂停setInterval
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- 可以't获取setInterval函数以使用javascript中的this.function_name调用另一
- 删除对象时终止setInterval
- 使用setInterval()函数进行图像闪烁
- “;对于“;内部”;setInterval”;
- jQuery - setInterval issue
- JavaScript setInterval issue
- setInterval issue (js)