JavaScript-Funktionen nicht in der richtigen Reihenfolge mit Schlaf ausgeführt

-1

ich ein Element ausblenden möge, und ein neues Element nach einer Sekunde angezeigt werden,JavaScript-Funktionen nicht in der richtigen Reihenfolge mit Schlaf ausgeführt

hier ist der vereinfachte Code:

function sleep(milliseconds) { 
 
    var start = new Date().getTime(); 
 
    for (var i = 0; i < 1e7; i++) { 
 
    if ((new Date().getTime() - start) > milliseconds){ 
 
     break; 
 
    } 
 
    } 
 
} 
 

 

 

 
function loadNewSubmenu() 
 
{ 
 
    document.getElementById("content-1").className = "hide-part"; 
 
    sleep(1000); 
 
    document.getElementById("content-2").className = "show-part"; 
 
}

.hide-part{ 
 
    display : none; 
 
}

<button id="content-1" class="show-part">B1</button> 
 
<button id="content-2" class="hide-part">B2</button> 
 
<button onclick="loadNewSubmenu()">click me</button>

Was ich erwartet:

ausblenden Element #content-1
Warten Sie eine Sekunde
Zeigen Sie das Element #content-2

Aber das ist, was ich habe:

Eine zweite Warte
Element #content-1
Ele #content-2 ment geändert

Ich weiß, dass ich setTimeout es beheben können, aber was ist der Grund für dieses Verhalten?

Quelle

2017-05-13 Pascal Goldbach

Verwenden' sleep' nicht aber 'setTimeout'. Und Sie haben zwei Elemente mit derselben ID, das ist falsch. – Oen44

Mögliches Duplikat von [Was ist die JavaScript-Version von sleep()?] (Http://stackoverflow.com/questions/951021/what-is-the-jascript-version-of-sleep) – Andreas

Mögliches Duplikat von [Reveal a div nach x Sekunden, und ein weiteres div nach y Sekunden] (http://stackoverflow.com/questions/18808383/reveal-a-div-after-x-seconds-and-reveal-another-div-after-y- Sekunden) oder [CSS Elemente automatisch nach 5 Sekunden ausblenden] (http://stackoverflow.com/questions/21993661/css-auto-hide-elements-after-5-seconds) – Aria

Verwendung SetTimeout statt Schlaf

function loadNewSubmenu() 
 
{ 
 
    document.getElementById("content-1").className = "hide-part"; 
 
    setTimeout(function(){ document.getElementById("content-2").className = "show-part"; },1000); 
 
    
 
}

.hide-part{ 
 
    display : none; 
 
}

<button id="content-1" class="show-part">B1</button> 
 
<button id="content-2" class="hide-part">B2</button> 
 
<button id="content-3" onclick="loadNewSubmenu()">click me</button>

Quelle

2017-05-13 10:09:08 JYoThI

einfach verwenden setTimeout()

function loadNewSubmenu() { 
 
    document.getElementById("content-1").className = "hide-part"; 
 
    setTimeout(function() { 
 
    document.getElementById("content-2").className = "show-part"; 
 
    }, 1000) 
 
}

.hide-part { 
 
    display: none; 
 
}

<button id="content-1" class="show-part">B1</button> 
 
<button id="content-2" class="hide-part">B2</button> 
 
<button id="content-1" onclick="loadNewSubmenu()">click me</button>

Quelle

2017-05-13 10:04:17 prasanth

Sie setTimeout(); hier verwenden können, ist ein exemple: `

<script> 
    function loadNewSubmenu() 
     { 
      document.getElementById("content-1").className = "hide-part"; 

      setTimeout(function(){ 
       document.getElementById("content-2").className = "show-part"; 
      },1000); 
     } 
</script>`

Quelle

2017-05-13 10:09:12

JavaScript-Funktionen nicht in der richtigen Reihenfolge mit Schlaf ausgeführt

Antwort

Verwandte Themen