Wie können Sie JavaScript-Timeouts nacheinander statt parallel ausführen?

Question

Ich mag die Timeout-Funktion in Jquery zweimal innerhalb einer Funktion verwenden, wie zum Beispiel:

$('.button').click(function() { 
    setTimeout(function(){ 
     Do something 
    },10000); 
    setTimeout(function(){ 
     Do something 
    },10000); 
}); 

Hier ist ein Beispiel von meinem Code ist: https://jsfiddle.net/Ln74dLp2/3/

Wie kann ich die beiden Timeouts nach jedem anderen Kette anstatt dass sie parallel laufen?

Answer 1

Ich denke, Sie haben etwas falsch konfiguriert. Der Code funktioniert gut (obwohl ich das Timeout auf 1 Sekunde für die Demo fiel gelassen):

$('#one').hide(); 
 
$('#two').hide(); 
 
$('.button').click(function() { 
 
    setTimeout(function() { 
 
    $('#one').show(); 
 
    setTimeout(function() { 
 
     $('#two').show(); 
 
    }, 1000); 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p id="one"> 
 
    Here is the first sentence 
 
    </p> 
 
    <p id="two"> 
 
    Here is the second sentence 
 
    </p> 
 
</div> 
 
<button class="button"> 
 
    click 
 
</button>

Eine zweite Option, die wahrscheinlich übertrieben ist, aber wenn man am Ende mit vielen dieser Elemente, könnte man eine einzige Funktion verwenden, die iteriert über alle Elemente jeweils eine um ein Vielfaches von 5 Sekunden Verzögerung:

$('#one').hide(); 
 
$('#two').hide(); 
 
$('.button').click(function() { 
 
    $('#one, #two').each(function(index) { 
 
    \t $(this).delay(5000 * (index + 1)).queue(function() { $(this).show(); }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p id="one"> 
 
    Here is the first sentence 
 
    </p> 
 
    <p id="two"> 
 
    Here is the second sentence 
 
    </p> 
 
</div> 
 
<button class="button"> 
 
    click 
 
</button>

Answer 2

Wenn Sie für die erste Funktion ausführen soll, bevor Sekunde ausgeführt wird, dies tun

$('.button').click(function() { 
     setTimeout(function(){ 
      Do something 
      setTimeout(function(){ 
       Do something 
      },10000); 
     },10000); 

    });