내부에있는 callbak으로 각각 "잠"jquery

Question

콜백 함수가있는 each()가 있습니다. each()가 콜백에 의해 동기가되도록하고 싶습니다. 나는

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>

내 코드는 이것보다 더 복잡 내 예를 여기에 게시 나는 "insFrom", "중간"에 데이터를 전달해야하고보다 "insTo"를 결합했다. 이제 내 결과는 첫 번째 행 만 결합 된 것이지만 모두 결합하려고합니다.

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