同時setIntervals - 只有第一個正在運行

我正在設計一個在後臺移動雲的網頁。我的代碼使用jQuery，看起來像這樣。同時setIntervals - 只有第一個正在運行

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。我讀過，應該可以同時使用多個間隔。

代碼有什麼問題？

來源

2013-04-05 MikkoP

也儘量'someArr [someArr.length] = setInterval的...'如果someArr = []在全球範圍內 – mplungjan 2013-04-05 17:45:45

你真的應該看看動畫的方法 – 2013-04-05 17:47:34

@roasted我所知道的在jQuery中生成動畫，但對於這種情況並不理想。使用動畫時，您需要指定時間。我可以做一些技巧，但這似乎更容易一些。 – MikkoP 2013-04-05 18:41:00

問題是你只有一個全局的，cloud。

在聲明前添加var：

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

當你不使用var關鍵字，使變量全球。

來源

2013-04-05 17:44:19

好極了，非常快！十分鐘，我可以將其標記爲答案。 – MikkoP 2013-04-05 17:45:47

您還沒有將cloud聲明爲局部變量，而是在全局上下文中。欲瞭解更多信息，請看這裏：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

來源

2013-04-05 17:45:06 mrks

首先你的問題是awsome，其次這是不是你的問題的答案，因爲它是調整你的動畫。
我向雲中添加了不透明度的不同層，增加了動畫速度的間隔以使其更加逼真（更近的雲移動禁止比較遠的雲），並生成雲的隨機大小，以下是代碼（純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

來源

2013-04-05 19:44:18 razzak

非常好看，謝謝你。我相信我也適應了我的版本:) – MikkoP 2013-04-05 19:47:53

同時setIntervals - 只有第一個正在運行

回答

相關問題