我想做一些divs比賽

所以也許這是一種少年，但我仍然在學習jquery。我有幾個DIV（絕對定位爲50x50像素），這段代碼讓它們在屏幕上移動。我想這樣做，所以如果你點擊綠色框，它會縮短間隔，從而加快移動速度。很明顯，我在這裏做錯了什麼，我只是不確定是什麼。我想做一些divs比賽

$(document).ready(function(){ 
    var greenSpeed = 300; 
    var redSpeed = 300; 
    var redLeft = $('#red').offset().left; 
    setInterval(function() { 
    $('#red').css('left', ++redLeft); 
    }, redSpeed); 
    var greenLeft = $('#green').offset().left; 
    setInterval(function() { 
    $('#green').css('left', ++greenLeft); 
    }, greenSpeed); 
    $('#green').click(function() {--greenSpeed}); 
});

來源

2011-04-20 aslum

你更新計時器間隔後，你已經開始計時器不會有任何效果。也許你應該保持計時器間隔不變，然後不要總是隻給位置加1，而是改變增量的大小。

也就是說，「redSpeed」和「greenSpeed」將從1開始，然後您將每次迭代中的這些添加到「redLeft」或「greenLeft」。點擊應該簡單地將「速度」變量增加1（或2或其他）。

來源

2011-04-20 19:13:37 Pointy

+1。清除並重置每次點擊的時間間隔，或者使用setTimeout。 – glomad 2011-04-20 19:15:22

好吧...所以我想出瞭如何做到這一點，但如果有人能解釋爲什麼會有所幫助。

var greenLeft = $('#green').offset().left; 
function moveGreen() { 
    setTimeout(moveGreen, greenSpeed); 
    $('#green').css('left', ++greenLeft); 
} 
moveGreen(); 
$('#green').click(function() {greenSpeed-=20});

我的猜測是，setInterval的只檢查一次colorSpeed當它第一次調用，所以即使我遞減高速計數器也沒關係。有沒有辦法做到這一點w/setInterval，或者是一個遞歸setTimeout調用唯一的方法？

來源

2011-04-20 19:14:55 aslum

它並不僅僅是「檢查」「colorSpeed」值 - 它們只是傳遞給函數的數字，所以變量的存在是未知的，並且不會被「setInterval（）」檢測到。 – Pointy 2011-04-20 19:16:03

第一個不起作用的原因是setInterval被傳遞存儲在greenSpeed中的值而不是指向該變量的指針。因此，GreenSpeed的後續更新無效。在你的第二位代碼中，你反覆調用setTimeout。每次調用它時都會傳遞存儲在greenSpeed中的當前值，從而在點擊後使用新值。

來源

2011-04-20 19:21:47

也許這應該是對上一個答案的評論，而不是回答 – 2011-04-20 19:23:20

這就像你想要它......

$(function(){ 

    var greenSpeed = 300; 
    var redSpeed = 300; 

    var redLeft = $('#red').offset().left; 

    function raceRed() { 

     setInterval(function() { 
      $('#red').css('left', ++redLeft); 
     }, redSpeed); 

    } 

    $('#red').click(function() { 
     --redSpeed; 
     raceRed(); 
    }); 

    raceRed(); 

    var greenLeft = $('#green').offset().left; 

    function raceGreen() { 

     setInterval(function() { 
      $('#green').css('left', ++greenLeft); 
     }, greenSpeed); 

    } 

    $('#green').click(function() { 
     --greenSpeed; 
     raceGreen(); 
    }); 

    raceGreen(); 

});

來源

2011-04-20 19:22:57 65Fbef05

我想做一些divs比賽

回答

相關問題