コールバックを持つそれぞれの "sleep"を

Question

コールバックを持つ関数の中にeach（）があります。 each（）がコールバックによって同期されるようにしたいと思います。 は、私は私のコードは、これよりももっと複雑であり、私は「中」にし、「insTo」と組み合わせるよりも「insFrom」からのデータを渡す必要がありますここに私の例

function insRow(rif, callback){ 
 
    setTimeout(function() { 
 
     $(rif+" tr:nth-child(2)"); 
 
     var newtr=$(rif+" tr:nth-child(2)").clone(); 
 
     $(".insTo").append(newtr); 
 
     $(rif+" tr:nth-child(2) td:nth-child(1)").text("O"); 
 
     $(rif+" tr:nth-child(2) td:nth-child(3)").text("O"); 
 
     $(rif+" tr:nth-child(2) td:nth-child(5)").text("O"); 
 
     if (callback) { callback(true); } 
 
    },1000); 
 
} 
 

 
var go=true; 
 
$(".insFrom tr:not(:first-child)").each(function(){ 
 
    if(go){ 
 
     go=false; 
 
     $(".middle tr:nth-child(2) td:nth-child(1)").text($(this).find("td:nth-child(1)").text()); 
 
     $(".middle tr:nth-child(2) td:nth-child(3)").text($(this).find("td:nth-child(2)").text()); 
 
     $(".middle tr:nth-child(2) td:nth-child(5)").text($(this).find("td:nth-child(3)").text()); 
 
     insRow(".middle", function(callback){ 
 
      if(callback){               
 
      go=true; 
 
      } 
 
     }); 
 
    } 
 
});

table td{ 
 
    border:1px solid black; 
 
    min-width:50px; 
 
    text-align:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<table class="insTo"> 
 
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> 
 
</table> 
 
<br><br> 
 
<table class="middle"> 
 
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> 
 
<tr><td>O/td><td>X</td><td>O</td><td>Y</td><td>O</td></tr> 
 
</table> 
 
<br><br> 
 
<table class="insFrom"> 
 
<tr><td>A</td><td>C</td><td>E</td></tr> 
 
<tr><td>1</td><td>2</td><td>3</td></tr> 
 
<tr><td>4</td><td>5</td><td>6</td></tr> 
 
<tr><td>7</td><td>8</td><td>9</td></tr> 
 
</table>

投稿してください。今私の結果は最初の行だけが結合されていますが、私はすべての組み合わせが必要です。

Answer 1

あなたはおそらくループ（これは新しいクールなjsのものである[古いブラウザでは動作しません]）待機する必要があります。

//we need to define a block of async code 
(async function(){ 
    //.forEach won't work, we need a real array and a real for loop 
    for(const el of $(".insFrom tr:not(:first-child)").toArray()){ 

    $(".middle tr:nth-child(2) td:nth-child(1)").text($(el).find("td:nth-child(1)").text()); 
    $(".middle tr:nth-child(2) td:nth-child(3)").text($(el).find("td:nth-child(2)").text()); 
    $(".middle tr:nth-child(2) td:nth-child(5)").text($(el).find("td:nth-child(3)").text()); 

    //now the real magic: 
    //the code halts here, and resumes when the callback gets called   
    await new Promise(callback => insRow(".middle", callback)); 
    } 
})();//the async code block is called emmidiately 

するか、あなたには、いくつかのコールバック地獄必要があります。

var els = $(".insFrom tr:not(:first-child)"); 
//an IIFE, used as an entry point for continuing 
(function next(i){ 
    //if index is out of scope terminate 
    if(i >= els.length) return; 
    var el = els[i]; 

    $(".middle tr:nth-child(2) td:nth-child(1)").text($(el).find("td:nth-child(1)").text()); 
    $(".middle tr:nth-child(2) td:nth-child(3)").text($(el).find("td:nth-child(2)").text()); 
    $(".middle tr:nth-child(2) td:nth-child(5)").text($(el).find("td:nth-child(3)").text()); 
    insRow(".middle", function(callback){ 
     if(callback){               
     next(i+1);//proceed with the next element 
     } 
    }); 
})(0);//start immediately at index 0