函數內部的JavaScript優先級

我想先打開疊加層，然後打開警告框。警報盒子裏，即使我有疊加後寫它首先one.So我需要知道的是在我的代碼有什麼問題函數內部的JavaScript優先級

<!DOCTYPE html> 
<html> 
    <style> 
     body { 
      margin: 0; 
      font-family: 'Lato', sans-serif; 
     }    
     .overlay { 
      height: 100%; 
      width: 0; 
      position: fixed; 
      z-index: 1; 
      top: 0; 
      left: 0; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0, 0.9); 
      overflow-x: hidden; 
      transition: 0.5s; 
     }    
     .overlay-content { 
      position: relative; 
      top: 25%; 
      width: 100%; 
      text-align: center; 
      margin-top: 30px; 
     }    
     .overlay a { 
      padding: 8px; 
      text-decoration: none; 
      font-size: 36px; 
      color: #818181; 
      display: block; 
      transition: 0.3s; 
     }    
     .overlay a:hover, .overlay a:focus { 
      color: #f1f1f1; 
     }    
     .overlay .closebtn { 
      position: absolute; 
      top: 20px; 
      right: 45px; 
      font-size: 60px; 
     }    
     @media screen and (max-height: 450px) { 
      .overlay a {font-size: 20px} 
      .overlay .closebtn { 
      font-size: 40px; 
      top: 15px; 
      right: 35px; 
      } 
     } 
     </style> 
     <body> 

     <div id="myNav" class="overlay"> 
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
      <div class="overlay-content">    
      </div> 
     </div> 

     <h2>Fullscreen Overlay Nav Example</h2> 
     <p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
     <p>In this example, the navigation menu will slide in, from left to right:</p> 
     <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 

     <script> 
     function openNav() {  
      document.getElementById("myNav").style.width = "100%"; 
      alert("hello"); 
     } 

     function closeNav() { 
      document.getElementById("myNav").style.width = "0%"; 
     }    
     </script>     
     </body> 
     </html>

來源

2016-10-02 vish_youtube

你的JavaScript代碼是不會等待您的

document.getElementById("myNav").style.width = "100%";

行，而css轉換髮生。它會立即開始執行下一個javascript的任何行。

如果你想要一個行動，你需要（如果使用關鍵幀動畫或animationend）添加一個事件偵聽器transitionend過渡之後發生。

所以，如果你想發生在您的警報轉換完成後，你需要對你的代碼更改爲類似

var nav = document.getElementById("myNav"); 
nav.addEventListener("transitionend",function(){ 
    //this callback is called when transition ends 
    alert("hello"); 
}); 
nav.style.width = "100%";

演示

var nav = document.getElementById("myNav"); 
 
var btn = document.querySelector("button"); 
 

 
function openNav() { 
 

 
    nav.addEventListener("transitionend", function() { 
 
    //this callback is called when transition ends 
 
    alert("hello"); 
 
    }); 
 
    nav.style.width = "100%"; 
 
} 
 

 
btn.addEventListener("click", openNav);

#myNav { 
 
    display: block; 
 
    width: 0%; 
 
    height: 100px; 
 
    background: grey; 
 
    transition: width 1s; 
 
}

<div id="myNav"> 
 
</div> 
 

 
<button>Open</button>

來源

2016-10-02 04:58:10

函數內部的JavaScript優先級

回答

相關問題