Javascript 如何使用回调同步运行2函数？

我有一个函数，

foo（）

，我想同步调用它两次

每次

foo（）

完成时，它的回调函数都应该用一条“已加载”消息更新我的

HTML:

Javascript:

 foo('Loaded... 50%', function(str){
      $('div').html(str);
       foo('Loaded... 100%', function(str){$('div').html(str)});
 });


 function foo(str, callback) {

     for (i = 0; i < 10000; i++) {
         $('div').append('. ');
     }

     //callback 
     if (typeof callback == "function") {
         callback(str);
     }
 }

foo（'Loaded…50%”，函数（str）{
$（'div'）.html（str）；
foo（'Loaded…100%”，函数（str）{$（'div'）.html（str）}）；
});
函数foo（str，回调）{
对于（i=0；i<10000；i++）{
$（'div'）。追加（'.'）；
}
//回拨
if（回调类型==“函数”）{
回调（str）；
}
}

我想要的体验是让用户首先看到50%的消息，直到第二次运行完

foo（）

，最终看到100%的消息

如何同步运行这些函数来实现这一点

---

谢谢

使请求同步并不是实现所需的最佳方法。事实上，应该尽可能避免同步调用

为了实现这一点，您可以将请求存储在一个数组中，然后根据该数组中延迟对象的

状态更新进度。您还可以使用
$.when（）.then（）
在所有请求完成后执行逻辑。试试这个：

var requests = [foo(), foo(), foo()]
$.when.apply($, requests).then(function() {
  $('div').after('All done!');
});

function foo(str) {
  return $.ajax({
    url: 'your-url-here.com',
    data: {
      foo: 'bar',
    },
    success: function(response) {
      var completed = requests.filter(function(r) { return r.state() == 'resolved'; })
      $('div').text(Math.round(completed.length / requests.length * 100, 0) + '% completed');
    }
  });
}


更好的做法是修改逻辑，这样您就可以在一个请求中发送所有必需的信息，然后使用
progress
属性更新UI。
它不需要同步。它本质上是一个加载器，我希望在100%之前显示50%，但我不在乎哪个函数先运行，或者先完成。我可能错了，但我认为我不能使用$.ajax。我没有调用外部文件。我的加载程序用于一个非常大的HTML页面。我在这里重新表述了我的问题：在这种情况下，您能否给出一个更具体的示例，说明您的代码在做什么。
var requests = [foo(), foo(), foo()]
$.when.apply($, requests).then(function() {
  $('div').after('All done!');
});

function foo(str) {
  return $.ajax({
    url: 'your-url-here.com',
    data: {
      foo: 'bar',
    },
    success: function(response) {
      var completed = requests.filter(function(r) { return r.state() == 'resolved'; })
      $('div').text(Math.round(completed.length / requests.length * 100, 0) + '% completed');
    }
  });
}