JavaScript事件队列

我想在JavaScript中实现一个电梯。只是最简单的形式。有几个级别和电梯。当用户点击某个级别时，电梯就在那里。如果用户在电梯仍然要到达其第一个目的地时点击几个级别，电梯必须记住级别的位置，并按顺序停在每个级别。所以最后我写了一些看起来像工作代码的东西。但我认为逻辑错误，导致电梯有时会中断当前的行动并进入最终指定的目的地。这里是代码JavaScript事件队列

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Lift</title> 
    <style> 
     * { 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
     } 

     .building { 
      width: 400px; 
      height: 600px; 
      border: 1px solid #CCC; 
      margin: auto auto; 
     } 

     .floors { 
      width: 70%; 
      height: 600px; 
      border: 1px solid #AAA; 
      float: left; 
     } 

      .floors .level { 
       width: 100%; 
       height: 100px; 
       border-bottom: 1px solid #AAA; 
       position: relative; 
      } 

     .lift-shaft { 
      width: 30%; 
      height: 600px; 
      border: 1px solid #AAA; 
      float: right; 
      position: relative; 
     } 

     .lift { 
      width: 100%; 
      height: 100px; 
      border: 1px solid blue; 
      position: absolute; 
      top: 0; 
      left: 0; 
      -webkit-transition: all 1s ease-in-out; 
      -moz-transition: all 1s ease-in-out; 
      -o-transition: all 1s ease-in-out; 
      transition: all 1s ease-in-out; 
     } 
    </style> 
</head> 
<body> 
    <div class="building"> 
     <div class="floors"> 
      <div class="level"></div> 
      <div class="level"></div> 
      <div class="level"></div> 
      <div class="level"></div> 
      <div class="level"></div> 
      <div class="level"></div> 
     </div> 
     <div class="lift-shaft"> 
      <div class="lift"></div> 
     </div> 
    </div> 

    <script> 

     (function() { 

      var levels = document.getElementsByClassName('level'), 
       theLift = document.querySelector('.lift'), 
       position = {}, 
       animationInProgress = false; 

      Array.prototype.forEach.call(levels, function (elem) { 
       elem.addEventListener('click', function (e) { 
        position.top = e.target.getBoundingClientRect().top - 10; 
        animateLift(position.top); 
       }, false); 
      }); 

      function animateLift(top) { 
       if (animationInProgress) { 
        theLift.addEventListener('webkitTransitionEnd', function (e) {      
         e.target.style.top = top + 'px'; 
         animationInProgress = false;      
        }, true); 
       } 
       else { 
        theLift.style.top = top + 'px'; 
        animationInProgress = true; 
        theLift.addEventListener('webkitTransitionEnd', function (e) {      
         e.target.style.top = top + 'px'; 
         animationInProgress = false;      
        }, true);     
       } 
      } 

     })(); 

    </script> 

</body> 
</html>

来源

2013-06-01 paperstreet7

这是一个家庭作业？ –

不，我不是学生。 – paperstreet7

你已经在标题中回答了你的问题：你需要一个队列（在JS中是一个简单的数组）。目前，您的脚本只有一个写入的“位置”对象。 – Bergi

你只需要分配一次动画结束事件。
处理！队列！存储水平选择，并且具有：
1）点击以启动动画或者移动移动
2）动画的结束触发从队列中取得的下一步移动。

因为会停止动画，所以您还必须注意不要请求两次相同的位置。我通过存储上次请求的位置并忽略了请求相同目标位置的点击来完成此操作。

这样的工作相当不错：

(function() { 

     var levels = document.getElementsByClassName('level'), 
      theLift = document.querySelector('.lift'), 
      position = {}, 
      targetPosition = -1, 
      animationInProgress = false; 

     var StackOfRequestedLevels=[]; 

     theLift.addEventListener('webkitTransitionEnd', function (e) {      
       if (StackOfRequestedLevels.length) 
        theLift.style.top = StackOfRequestedLevels.shift() + 'px'; 
      else 
       animationInProgress = false; 
       }, true); 

     Array.prototype.forEach.call(levels, function (elem) { 
     elem.addEventListener('click', function (e) { 
       position.top = e.target.getBoundingClientRect().top; 
       if (position.top === targetPosition) return; 
       targetPosition = position.top; 
       if (!animationInProgress) 
        theLift.style.top = position.top + 'px'; 
       else { 
        StackOfRequestedLevels.push (position.top); 
        } 
       animationInProgress=true; 
      }, false); 

     }); 

    })();

来源

2013-06-01 19:39:34 GameAlchemist

更改了一下代码，现在应该可以。 – GameAlchemist

谢谢！它帮助了很多！ – paperstreet7

按预期工作。 – paperstreet7

JavaScript事件队列

回答

相关问题