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事件隊列

回答

相關問題