Javascript 同步设置间隔-仅第一次运行

我正在设计一个网页，背景中有移动的云。我的代码使用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);
}

browserWidth=0；
浏览器高度=0；
云=4；
云速=50；
$（函数（）{
browserWidth=$（窗口）.width（）；
browserHeight=$（窗口）.height（）；
对于（i=0；i

基本上，它使用

createCloud

函数创建四个云（带有背景图像的div），初始化div并使用

setInterval

设置间隔。在间隔函数中，我调用函数

moveCloud

，将div向左移动一个像素。请参见上面的代码

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

---

代码有什么问题？

问题是您只有一个全局的

云

在声明前添加
var
：

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

var cloud=$（“”）.addClass（“cloud”）.appendTo（“body”）.offset({

如果不使用关键字，则将变量设置为全局变量。
您没有将
cloud
声明为局部变量，而是在全局上下文中声明。有关更多信息，请参阅：
首先，您的问题很难回答，其次，这并不是对您的问题的回答，而是对动画的调整。

我向云添加了不同的不透明度层，增加了动画速度的间隔以使其更逼真（近云移动速度比远云快），并为云生成了随机大小，下面是代码（纯javascript）：

var云=4，
云速=20，
browserWidth=window.innerWidth，
browserHeight=window.innerHeight，
int=5；
对于（i=0；i

也可以尝试
someArr[someArr.length]=setInterval…
其中someArr=[]在全局范围内，您应该真正了解动画method@roasted我知道jQuery中的动画，但它不适合这种情况。使用动画，你需要指定一个时间。虽然我可以做一些技巧，但这似乎更容易。非常好，非常快！十分钟后，我可以将其标记为答案。非常好看，谢谢。我相信e我也根据我的版本修改了一些内容：）
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));
}