Question

我有以下代码：

$(document).ready(function() {
  loadStuff(someURL, someID);
  showStuff('foo');
});

showStuff（）依赖于loadStuff（）生成的内容，但似乎showStuff（）在所述内容可用之前就跳了起来。如何强制它们按顺序运行？

更新：是的，在loadStuff中有ajax调用，但遗憾的是它们是jsonp，因此无法同步调用。

Answer 1

将其重写为：

$(document).ready(function() {
  loadStuff(someURL, someID, function() { showStuff('foo'); });
});

其中loadStuff的第三个参数是加载内容后要调用的回调

Answer 2

优雅的方式是使用jQuery.Deferred，特别是Deferred.pipe。请参阅问题Understanding jQuery Deferred.pipe()以获取示例。

Answer 3

在loadStuff发出的ajax调用的成功回调中调用showStuff。

另见 How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

Answer 4

他们执行按顺序运行，但loadStuff内的内容可能不是（特别是如果loadStuff正在执行异步HTTP请求）。 loadStuff里面的代码没有按顺序运行。

通常我只是说“我们需要方式更多的代码上下文来回答这个问题”，但是有足够的说法：

使用同步HTTP请求，或将对showStuff的调用移动到异步响应的成功回调中，以便它仅在请求完成时触发。

Answer 5

你可以：

将showStuff作为委托给一个回调，以便在loadStuff()内的AJAX调用成功响应时调用该回调。

示例：

function loadStuff() {

      $.ajax({
      url: "Stuff/GetStuff",
      success: function(){
        showStuff();
      }
    });

}

或者，不太优雅的方式，只需检查数据是否经常加载，直到它是：

var timerId = setInterval(showStuff, 50);

function showStuff() {
  if (stuffIsLoadded) {
    // do show stuff stuffs.
    clearInterval(timerId);
  }
}

如何使jQuery函数顺序

5 个答案: