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”传递到“middle”，而不是合并到“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