javascript - 如何在 for 循环中运行 $.getJSON 并在所有调用完成后执行代码？

Question

我想迭代 URL 数组，从每个 URL 检索 json 数据并将其作为我的数组的新元素推送，称为returned_data. 只有当所有 json URL 都被获取后，我才想对returned_data.

我怎样才能做到这一点？

这是我的糟糕尝试，它不起作用，因为内部不允许 for 循环$.when：

var base_url = "http://app.loc/";

var urls = [
  base_url + "1.json",
  base_url + "2.json",
  base_url + "3.json"
];

var returned_data = [];

$.when(

  for ($i = 0; $i < urls.length; $i++) {

    $.getJSON(urls[$i], function(data) {
      returned_data.push(data);
    });

  }

).then(function() {

  console.log(returned_data);

});

标签： javascriptjquery

Answer 1

检查文档：https ://api.jquery.com/jquery.when/

var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
    console.log( v1 ); // v1 is undefined
    console.log( v2 ); // v2 is "abc"
    console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});

d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );

你可能想做类似的事情

var base_url = "http://app.loc/";

var urls = [
  base_url + "1.json",
  base_url + "2.json",
  base_url + "3.json"
];
var returned_data = [];
var all = $.Deferred();

$.when(all).then(....)


  for ($i = 0; $i < urls.length; $i++) {

    $.getJSON(urls[$i], function(data) {
      returned_data.push(data);
      if (returned_data.length === urls.length) {
          all.resolve()
      }
    });

  }