Question

我的代码如下：

jQuery.getJSON( "url/to/some/script.php", function( data ) {
     var test = data.someValue;
      console.log('This message should occur first');
});

console.log('this message should occur second');

// do things with data retrived above...

发生的事情是，第一个console.log在第二个之后执行。我想因为它需要时间来制作Ajax请求，但我没有意识到它将继续向下移动脚本而不完成。因此，当我尝试在代码后直接使用它们时，由AJAX请求产生的变量是“未定义的”。

处理这种情况的最佳方法是什么？

Answer 1

在所谓的异步编程中，只有一个有效的解决方案：将Ajax完成后应该运行的代码放入函数中，即：

jQuery.getJSON( "url/to/some/script.php", function( data ) {
  var test = data.someValue;
  console.log('This message should occur first');

  console.log('this message should occur second');
  // And all code that should be run after Ajax should go here
});

在传统语言（例如，PHP）中，下一行代码在前一行之后执行。如果某行有长时间的操作（如数据库或Ajax请求），则程序将停止执行，直到该行获得请求结果。

在异步编程中，相反，程序不会停止。它记得在完成请求后应调用此回调函数，并继续立即运行所有其他行。所以，程序不必停下来等待。但这意味着所有需要请求结果的代码都应放在回调函数中。

Answer 2

使用Promise接口，它允许jQuery的Ajax方法（如jQuery.getJSON（））链接一个或多个回调

jQuery.getJSON( "url/to/some/script.php", function( data ) {
 var test = data.someValue;
     console.log('This message should occur first');
}).done(function() {
    console.log('this message should occur second');
}):

Answer 3

你可以使用jquery promises http://api.jquery.com/promise/来帮助异步javascript

$.getJSON("url/to/some/script.php").success(function(data) {
  var test = data.someValue;
      console.log('This message should occur first');
}).done(function() {
console.log('this message should occur second');
// do things with data retrived above...
});

JQuery - 在第二个命令之前执行第一个命令

3 个答案: