Question

我有一个带有回调的函数内的each（）。我希望each（）将通过回调同步。我在这里发布我的例子

＆＃13;

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;
          }
        });
    }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的代码比这更复杂，我必须从＆＃34; insFrom＆＃34;传递数据。到＆＃34;中＆＃34;而不是结合到＆＃34; insTo＆＃34;。现在我的结果只是第一行的组合，但我希望全部合并。

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

jquery每个＆＃34;睡眠＆＃34;里面有callbak

1 个答案: