jquery 等待 .ajax() 在 .each() 迭代中完成

Question

我有一个 jquery 函数，它使用 jquery .each() 选择器从特定 class 的所有节点获取文本：

function get_text()
            {
              $(".my_class").each(function () 
              {
                $this = $(this);
                node_text = $this.text();
                console.log(node_text);
              })
            }

按预期工作。接下来，我想使用 .ajax() :

将文本发送到 php 脚本

function get_php_text(node_text)
            {
               let url = `myphp.php?string_text=${node_text}`;
                 $.ajax(
                      {
                        url: url,
                        success: function(result)
                          { 
                            console.log(result);
                          }
                      });
            }

该功能也按预期工作。

当我运行以下内容时：

function get_text()
            {
              $(".my_class").each(function () 
              {
                $this = $(this);
                node_text = $this.text();
                get_php_text(node_text);
              })
            }

我运行遇到了一个问题，因为 get_php_text() 没有等待每个 .each() 迭代完成。

如何重写 get_text() 函数，使其等待 get_php_text( ) 到 return，然后再进行下一次迭代？

Answer 1

您可以通过使 get_php_text() 递归，使迭代在 ajax 调用的成功处理程序内完成。这样下一次迭代只会在前一次完成其 ajax 请求后发生。

function get_text() {
  let node_text_array = [];
  $(".my_class").each(function() {
    node_text_array.push($(this).text());
  });
  get_php_text(node_text_array);
}  

function get_php_text(node_text_array) {
  if (node_text_array.length>0) {
    let node_text = node_text_array.splice(0,1);
    let url = 'myphp.php?string_text=${node_text}';
    $.ajax({
      url: url,
      success: function(result) {
        console.log(result);
        get_php_text(node_text_array);
      }
    });
  }
}

Answer 2

编辑：删除了 $.each 所指出的承诺。

另一个例子是使用闭包，但是如果你想在 $.each 中每次迭代发生时发送数据，就应该使用它。

function get_text() {
    function SampleClosure(node_text) {
        let url = `myphp.php?string_text=${node_text}`;
        $.ajax({
            url: url,
            success: function(result) {
                console.log(result);
            }
        });
    }

    $(".my_class").each(function() {
        $this = $(this);
        node_text = $this.text();
        SampleClosure(node_text);
    })
}

所以，上面发生的事情是，每个元素，文本都被提取并传递给闭包，闭包是一个表达式，可以在首次声明时引用其范围内的变量。因此，即使您在发送 Ajax 调用之前更改传递的变量，它仍将使用旧传递的文本并且函数将执行。我喜欢（这是错误的）将其视为使用传递的数据创建函数实例，一旦完成由 GC 处理，并且在循环内，函数的多个实例在它们自己的内存分配中创建。正如我所说，这就是我的看法，我所说的可能是错误的，但从理论上讲，这就是这个过程在我看来和运作的方式。

jquery 等待 .ajax() 在 .each() 迭代中完成

jquery waiting for .ajax() to complete within .each() iteration

ajax

each

jquery

编辑：删除了 $.each 所指出的承诺。