Question

我已经看过几个回调函数的例子，但它们似乎没有回答我的问题。我希望在myFunction2()完成后执行for loop（参见下面的代码），遗憾的是在for loop完成之前调用它（可能是由于for循环中的API调用）。

有人可以告诉我如何确保myFunction2()仅在完成for loop后才被调用。

function myFunction(){
 for(var i =0; i<array1.length; i++){
    // contains code with API calls
 }
 myFunction2();
}

Answer 1

函数二调用后循环完成它的过程。或者您可以使用count来确保循环遍历的长度和计数相等。然后只调用函数2

<html>
    <head>
        <title>win_load_vs_doc_load</title>
        <script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
    </head>
    <script type="text/javascript">
        $arr=["a","a1","a2","a3"];
        myFunction();
        function myFunction()
        {
            for(var i =0; i<=$arr.length; i++)
            {
                if(i==$arr.length)
                    {
                        myFunction2();
                    }
                else
                    {
                        alert(i);
                    }
            }
        }

        function myFunction2()
        {
            alert("myFunction2 called");
        }
    </script>
</html>

Answer 2

这是因为API是异步调用的，JavaScript函数已完成，直到API调用的结果返回为止，

最简单的解决方案是回调。只需给API调用一个回调函数，以便在它返回时执行，但由于你没有给出API调用代码，还有一种方法可以执行它。

使API代码同步。不建议将API调用同步，因为如果API调用花费大量时间，它会阻止其余代码工作，但这是可能的。

例如：jQuery.ajax()具有async (default: true)属性，如果设置为false，则会使ajax请求同步。

注意：异步被弃用所以不要使用它，我刚刚告诉你，因为这是一种方法。使用成功或失败等回调函数！像这样（假设API调用是ajax）：

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" },

  success: function2;

})

希望这可以回答您的问题，如果没有，请在此处粘贴您的API调用代码。

Answer 3

假设您正在使用$.ajax，您可以为每个调用使用promises数组，并在所有这些promises解析后使用$.when()执行。

function myFunction(){
 var promises = array1.map(function(arrayElement){
      // arrayElement is same as array1[i] in your loop    
      var data = // get what you need from arrayElement
      // return the promise that is returned from $.ajax`
      return $.get(url, data).done(function(resp){
          // do whatever you do with the response
      });    
 });

 $.when.apply(null, promises).done(function(){
    // code here gets called whan all api requests have successfully completed
    myFunction2();

 }).fail(function(err){
     // not all requests succeeded
 })

}

Answer 4

您可以使用$.when()替换.apply()，$.map()代替for循环

$.when.apply($, $.map(array1, function(request) {
  // do api stuff
  return $.ajax(request)
}))
// call `myFunction2` when all api stuff completed
.then(myFunction2
// handle error of api call
, function err(jqxhr, textStatus, errorThrown) {
  console.log(errorThrown)
})

for循环完成后执行一个函数

4 个答案: