Question

如何使.each()等待所有嵌套函数完成？

继承我的代码

HTML：

<div>
   <p>Text 1</p>
   <p>Text 2</p>
   <p>Text 3</p>
</div>

jQuery的：

function function1(){
  $.get(getURL, function(data) {
           if(data == "false"){
               PostLog("ERROR: Could not get Product Number or Description", "error");`//PostLog adds new line to on page log`
           }else if(data == "true"){
               PostLog("Retrieved Product Number and Description", "proccess");
               PostLog("Completed Crawl", "success");
           }
        });

}

function function2(){
  //do some stuff
}


$('p').each(function()
    {

    function1();
    function2();

});

基本上我想要功能1＆amp; 2为文本1，一旦功能完成，则功能1＆amp; 2为文本2 ...

如果有人有任何想法会很棒。

修改

对不起，我忘了提一些细节..

在函数1中，它调用外部php脚本，函数1大约需要30秒才能返回true。但是，当函数2返回时，下一个each()已经运行。

Answer 1

利用callbacks。

function function1(control,callback) {
  console.log("Executing Function 1 for "+control.text());
  callback(control);//call the 2nd function here
}

function function2(control) {
  console.log("Executing Function 2 for "+control.text());
}


$('p').each(function() {
  function1($(this),function2); //pass the callback function
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <p>Text 1</p>
   <p>Text 2</p>
   <p>Text 3</p>
</div>

<强>更新

不会有太大的变化，只需在callback function内移动get，如下所示：

function function1(control,callback) {
     $.get(getURL, function(data) {
           if(data == "false"){
               PostLog("ERROR: Could not get Product Number or Description", "error");`//PostLog adds new line to on page log`
           }else if(data == "true"){
               PostLog("Retrieved Product Number and Description", "proccess");
               PostLog("Completed Crawl", "success");
           }
           callback(control); //call it here now.
      });
}

Answer 2

本身不是一个jquery问题，但在你的情况下，你可以将元素作为参数传递给每个函数：

function f1(el) { 
    // do things with/for el
}

function f2(el) {
    // do things with/for el
}

// getting all the elements we want
var $elements = $("p");

// iterating over each element in the pseudo-array and passing it to the functions
$elements.each(function(i, el) {
    f1(el);
    f2(el);
});

Answer 3

由于.get()函数需要随机时间执行...

我使用随机setTimeout复制这个随机时间这仅用于示例。

jQuery .each()不会等待。它只会调用函数调用。

我在这里解释的是如何制作一个＆＃34;定制每个＆＃34;功能。

这个函数，我称之为doItInOrder()，＆＃34;处理＆＃34;通过调用函数1逐个p 功能1调用功能2.
最后，功能2回忆起我们每个人的习惯。函数再次循环。

要调用下一个函数，您必须使用success函数的.get()回调。 Reference here

请参阅my Fiddle

// Check how many p you have
var Plength = $('p').length;
$("#console").append(Plength+" 'p' elements<br><br>");


j=0;
function doItInOrder(){
    // Call function 1 if all p have been "processed"
    if( j < Plength ){
        function1();
    }
}

// Simulated get function with random time
function function1(){

    var thisRandomTime = getRandom();
    $("#console").append(thisRandomTime+" milliseconds later:<br>");

    setTimeout(function(){
        $("#console").append("Did function 1 on "+$("p").eq(j).html()+"<br><br>");

        function2();

    },thisRandomTime);
}

// Simulated get function with random time
function function2(){

    var thisRandomTime = getRandom();
    $("#console").append(thisRandomTime+" milliseconds later...<br>");

    setTimeout(function(){
        $("#console").append("Did function 2 on "+$("p").eq(j).html()+"<br><br>");

        // Call for next iteration
        j++
        doItInOrder();

    },thisRandomTime);
}

// Calls the first iteration
doItInOrder();

// Used to simulate random execution time in this example
function getRandom() {
    return (Math.random()*1000).toFixed(2);
}

<强> ----
现在从您的代码开始：
它看起来像这样：

// Check how many p you have
var Plength = $('p').length;


var j=0;
function doItInOrder(){
    // Call function 1 if all p have been "processed"
    if( j < Plength ){
        function1();
    }
}

function function1(){
  $.get(getURL, function(data) {
           if(data == "false"){
               PostLog("ERROR: Could not get Product Number or Description", "error");`//PostLog adds new line to on page log`
           }else if(data == "true"){
               PostLog("Retrieved Product Number and Description", "proccess");
               PostLog("Completed Crawl", "success");

               // then:
               function2();
           }
        });

}

function function2(){
  //do some stuff using `$("p").eq(j)` to target the element.
  PostLog( "Working on "+$("p").eq(j).html() );

  // then:
  j++;
  doItInOrder();
}

// first iteration call
doItInOrder();

等待直到嵌套函数完成继续下一步.each（）

3 个答案: