Question

以下代码用于在用户按空格键时在屏幕上移动一个小红色div。在“拍摄”功能中，我创建一个新的div并设置超时，然后它将从'moveLazer'功能开始向上移动屏幕。

问题：如果您拍摄几次，当一个div击中屏幕顶部时，“lazerLifeCycle”变量会清除，但也会清除仍在移动但尚未移动到顶部的第二个或第三个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>

Answer 1

<强> 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);
    }
}

基本上你不需要担心清除超时，因为除非你告诉他们，否则他们不会再次发生。此外，为了使您能够拍摄多个激光器，您只需要引用传递给moveLazer的ID即可。基本上它会继续，直到激光击中顶部。还允许支持多次拍摄。

将setTimeout分配给全局变量并多次清除单独的函数

1 个答案: