Question

我有一个函数foo()，我想同步调用两次。

每次foo()完成时，其回调函数都应使用“已加载”消息更新我的<div>。

HTML：

 <div></div>

使用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);
     }
 }

我想要的体验是让用户先看到50％的消息，直到foo()第二次完成运行，然后他们才能看到100％的消息。

如何同步运行这些功能才能实现这一目标？

谢谢！

Answer 1

使请求同步并不是实现所需内容的最佳方式。事实上，应尽可能避免同步呼叫。

要实现此目的，您可以将请求存储在数组中，然后根据该数组中的延迟对象的state更新进度。所有请求完成后，您还可以使用$.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');
    }
  });
}

Working example

更好的做法是修改逻辑，以便您可以在单个请求中发送所有必需的信息，然后使用progress属性更新UI。

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

1 个答案: