同时 setIntervals - 只有第一个运行答案

【问题标题】：Simultaneous setIntervals - only first one running同时 setIntervals - 只有第一个运行
【发布时间】：2013-04-05 17:41:52
【问题描述】：

我正在设计一个背景有移动云的网页。我的代码使用 jQuery，看起来像这样。

browserWidth = 0;
browserHeight = 0;
clouds = 4; 
cloudSpeed = 50;

$(function() {  
    browserWidth = $(window).width();
    browserHeight =  $(window).height();

    for(i = 0; i < clouds; i++) {
        createCloud(cloudSpeed);
    }
});

function moveCloud(cloud) {
    offset = cloud.offset();
    posX = offset.left;
    posX--;

    if(posX < -250) {
        posX = browserWidth;
    }

    cloud.offset({
        left: posX
    });
}

function createCloud(speed) {
    posY = Math.floor(Math.random() * (browserHeight / 2.5));
    posX = Math.floor(Math.random() * (browserWidth - 255));

    cloud = $("<div></div>").addClass("cloud").appendTo("body").offset({
        top: posY,
        left: posX
    });

    setInterval(function() {
        moveCloud(cloud);
    }, speed);
}

基本上它使用createCloud 函数创建四朵云（带有背景图像的div），它初始化div 并使用setInterval 设置间隔。在间隔函数中，我调用函数moveCloud 将 div 向左移动一个像素。见上面的代码。

我的问题是它只移动了一个 div。我读过同时使用多个间隔应该没问题。

代码有什么问题？

【问题讨论】：

也试试someArr[someArr.length] = setInterval... where someArr=[] in global scope
你真的应该看看 animate 方法
@roasted 我知道 jQuery 中的动画，但它并不适合这种情况。使用动画，您需要指定时间。虽然我可以做一些技巧，但这似乎更容易一些。

标签： javascript jquery loops setinterval

【解决方案1】：

问题是你只有一个全局的cloud。

在声明前添加var：

var cloud = $("<div></div>").addClass("cloud").appendTo("body").offset({

当您不使用 var 关键字时，您将变量设为全局变量。

【讨论】：

很棒而且速度极快！十分钟，我可以将其标记为答案。

【解决方案2】：

您尚未将cloud 声明为局部变量，而是在全局上下文中。欲了解更多信息，请参阅：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

【讨论】：

【解决方案3】：

首先，您的问题很糟糕，其次，这不是您问题的答案，而是对您的动画进行了调整。
我为云添加了不同的不透明度层，增加了动画速度的间隔以使其更逼真（更近的云比远处的移动更快）并为云生成随机大小，这是代码（纯 JavaScript）：

var clouds = 4,
    cloudSpeed = 20,
    browserWidth = window.innerWidth,
    browserHeight = window.innerHeight,
    int = 5;

for (i = 0; i < clouds; i++) {
    createCloud(cloudSpeed, i, int);
}


function moveCloud(cloud) {
    var posX = (cloud.offsetLeft < -250) ? browserWidth : cloud.offsetLeft;
    posX--;
    cloud.style.left = posX + "px";
}

function createCloud(speed, index, interval) {
    var posY = Math.floor(Math.random() * (browserHeight / 2.5)),
        posX = Math.floor(Math.random() * (browserWidth - 255)),
        cloud = document.createElement('div'),
        height = h + Math.floor(Math.random() * 40),
        width = w + Math.floor(Math.random() * 40);
    cloud.className = "cloud";
    cloud.innerHTML = svg(width, height);//added svg scalable background, see the demo
    document.getElementsByTagName('body')[0].appendChild(cloud);
    cloud.style.left = posX + "px";
    cloud.style.top = posY + "px";
    cloud.style.opacity = 1 - (index / 10);
    cloud.style.zIndex = (clouds - index) * 100;
    setInterval(function () {
        moveCloud(cloud);
    }, speed + (interval * index));
}

DEMO

【讨论】：

非常好看，谢谢。我相信我也会根据我的版本调整一些东西:)