jQuery 每个“睡眠”都带有回调

Posted 2023-02-19

【中文标题】jQuery 每个“睡眠”都带有回调

【英文标题】：jQuery each "sleep" with callback inside

【发布时间】：2018-04-29 22:24:21

【问题描述】：

我在带有回调的函数内部有一个 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”。现在我的结果只是第一行合并，但我想将所有合并。

【参考方案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

【讨论】：

干得好！我不习惯写这样的代码......但你的作品！我试过这个（jsfiddle.net/6wgygwcw/3）......对我来说更清晰，但仍然无法让它工作。谢谢

@francesco 你为什么不干脆拿走我的？！

?打扰一下，你能解释一下吗？