jQueryで要素のテキストを複数回設定したときの.setTimeoutsの途中でジャンプする.setTimeouts

Question

各変更の間に1秒間隔で要素のテキストを連続的に変更しようとしています。

問題は、中間の変更をジャンプして、要素の最初のテキストから最終テキスト（ 'text'から 'text4'への 'text'から 'text2' to 'text3 'から'テキスト4 '）。

なぜこのようなことが起こり、どのように回避できますか？

あなたがそれらを設定秒後に完了し、一度にすべてのタイムアウトを設定しているためだ

setTimeout(
function() 
{ 
    $("#elementid").text("text2"); 
}, 1000); 


setTimeout(
    function() 
    { 
    $("#elementid").text("text3"); 
    }, 1000); 


    setTimeout(
    function() 
    { 
    $("#elementid").text("text4"); 
    }, 1000);  

Answer 1

。あなたは1000年、2000年、3000に遅延を変更します。

setTimeout(
    function() { 
     $("#elementid").text("text2"); 
    }, 1000); 


setTimeout(
    function() { 
     $("#elementid").text("text3"); 
    }, 2000); 


setTimeout(
    function() { 
     $("#elementid").text("text4"); 
    }, 3000); 

や巣それらを：

setTimeout(
    function() { 
     $("#elementid").text("text2"); 
     setTimeout(
      function() { 
       $("#elementid").text("text3"); 
       setTimeout(
        function() { 
         $("#elementid").text("text4"); 
        }, 1000); 
      }, 1000); 
    }, 1000); 

Answer 2

あなたがPromisesを使用することができるなら、私は

const showTextWithDelay = (text, delay) => { 
 
    return new Promise(resolve => { 
 
     setTimeout(() => { 
 
    \t  $("#elementid").text(text); 
 
      resolve(); 
 
     }, delay); 
 
    }) 
 
}; 
 

 
showTextWithDelay("text1", 1000) 
 
    .then(() => showTextWithDelay("text2", 1000)) 
 
    .then(() => showTextWithDelay("text3", 1000));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="elementid">---</div>

このスニペットを示唆しています