jQuery等待.each()迭代内完成.ajax()的jQuery [英] jquery waiting for .ajax() to complete within .each() iteration

问题描述

具有一个jquery函数，该函数使用jquery .each()选择器从特定类的所有节点中获取文本:

Ive a jquery function that obtains text from all nodes of a particular class using the jquery .each() selector:

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

可以正常工作.接下来，我想使用 .ajax()将文本发送到php脚本:

That works as expected. Next, I want to send the text to a php script using .ajax() :

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

该功能也可以正常使用.

That function also works as expected.

当我运行以下命令时:

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

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

I run into a problem as get_php_text() is not waiting for each .each() iteration to complete.

如何重写 get_text()函数，以使其等待 get_php_text()返回，然后再进行下一次迭代?

How can I rewrite the get_text() function so that it waits for the get_php_text() to return before going to the next iteration?

推荐答案

删除了$.指出的承诺.每个都不支持.

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

Removed a promise as pointed out $.each doesn't support it.

Another example is using closures, but it should be used if you want to send data every time an iteration occurs in $.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);
    })
}

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

So, what happens above is, every element, the text is extracted and passed to a Closure which is an expression that can reference variables within its scope when it was first declared. So even if you change the passed variable before the Ajax call is sent, it'll still use the old passed text and function will execute. I like to (which is wrong) think of it as creating an instance of a function with passed data which once completed is taken care of by GC, and within the loop, multiple instances of the function are created within their own memory allocation. As I said, this is how I see it, and what I said might be wrong, but theoretically this is how the process appears to me and works.

这篇关于jQuery等待.each()迭代内完成.ajax()的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！