將setTimeout賦值給全局變量並在多次單獨函數中清除

下面的代碼旨在當用戶按下空格鍵時將一個小的紅色div移動到屏幕上。在'拍攝'功能中，我創建一個新的div並設置一個超時，然後它將從'moveLazer'功能開始向上移動屏幕。將setTimeout賦值給全局變量並在多次單獨函數中清除

問題：如果你拍了幾次，'lazerLifeCycle'變量會在一個div碰到屏幕頂部時清除，但也會清除第二個或第三個div仍在移動但不在頂端的超時。從我看到的，使用setInterval並不能解決問題。我知道它是因爲lazerLifeCycle是全球性的，但我看不到正確的做法。請幫忙！下面是js和html。注意，如果您想複製/粘貼並嘗試它們，它們是2個不同的文件。在Firefox或Chrome中運行它。它在IE中沒有做任何事情。

//level3.js 

var lazerId = 1; 

var init = function(){ 
    var ship = document.getElementById('randRect'); 
    ship.style.left = '700px'; 
    ship.style.top = '300px'; 
} 

document.onkeyup = function(e) { 
    if(e.keyCode == 37) { 
    moveLeft(); 
    } else if(e.keyCode == 39){ 
    moveRight(); 
    } else if(e.keyCode == 32){ 
    shoot(); 
    } 
} 

var shoot = function(){ 
    lazerId = lazerId + 1; 
    var ship = document.getElementById('randRect'); 
    width = parseInt(ship.clientWidth); 
    xPos = parseInt(ship.style.left); 
    middle = ((xPos + (width/2)) - 3) + 'px'; //-3 is to center it i think 
    var lazer = document.createElement('div'); 
    lazer.id = lazerId; 
    var body = document.getElementById('body'); 
    body.appendChild(lazer); 
    lazer.style.position = 'absolute'; 
    lazer.style.width = '7px'; 
    lazer.style.height = '13px'; 
    lazer.style.left = middle; 
    lazer.style.top = '287px'; 
    lazer.style.backgroundColor = 'red'; 
    lazerLifeCycle = setTimeout('moveLazer(' + lazerId.toString() + ');', 10); 
} 

var moveLazer = function(lazerElementId){ 
    var lazer = document.getElementById(lazerElementId.toString()); 
    var lazerTop = parseInt(lazer.style.top); 
    if((lazerTop - 1) < 0){ 
     lazer.style.top = '0px'; 
     clearTimeout(lazerLifeCycle); 
    } else { 
     lazer.style.top = (lazerTop - 1) +'px' 
     lazerLifeCycle = setTimeout('moveLazer(' + lazerElementId.toString() + ');', 10); 
    } 
} 

var moveLeft = function(){ 
    var ship = document.getElementById('randRect'); 
    shipXPos = parseInt(ship.style.left); 
    if((shipXPos - 15) < 0){ 
     ship.style.left = 0+'px'; 
    } else { 
     ship.style.left = shipXPos - 15+'px'; 
    } 
} 

var moveRight = function(){ 
     var ship = document.getElementById('randRect'); 
    shipXPos = parseInt(ship.style.left); 
    if((shipXPos + 15) > 1300){ 
     ship.style.left = 1300+'px'; 
    } else { 
     ship.style.left = shipXPos + 15+'px'; 
    } 
} 

window.onload = init; 

//level3.html 
<html> 
    <head> 
     <title>random</title> 
     <style type="text/css"> 
      .random{ 
       position:absolute; 
       background: orange; 
       padding: 7px; 
      } 
     </style> 
     <script src="level3.js" type="text/javascript"> 
     </script> 
    </head> 
    <body id="body"> 
     <div id="randRect" class="random"><center><-- or --><center></div> 
    </body> 
</html>

來源

2012-06-27 james

真的嗎？沒有答案？ – james

Working Demo

確定繼承人簡化VS與改變的代碼。

var shoot = function(){ 
    lazerLifeCycle = moveLazer(lazerId); 
} 

var moveLazer = function(lazerElementId){ 
    var lazer = document.getElementById(lazerElementId.toString()); 
    var lazerTop = parseInt(lazer.style.top); 
    if((lazerTop - 1) < 0){ 
     lazer.style.top = '0px'; 
    } else { 
     lazer.style.top = (lazerTop - 1) +'px' 
     setTimeout(function(){moveLazer(lazerElementId);}, 10); 
    } 
}

基本上你不需要擔心如何清除超時，因爲他們不再次發生，除非你告訴他們。此外，爲了使它能夠拍攝多個lazer，你只需要參考傳遞給moveLazer的ID就可以開始。基本上它會一直持續下去，直到拉澤爾擊中頂端。也允許支持多個鏡頭。

來源

2012-06-28 17:08:55 Loktar

將setTimeout賦值給全局變量並在多次單獨函數中清除

回答

相關問題