javascript - For 循环中 Ajax 调用的顺序和动态数量

Question

var data = [{start_date:20180601,end_date:20180701},{start_date:20180801,end_date:20180901},{start_date:20181001,end_date:20181101},{start_date:20181201,end_date:20190101}];
var requests = [];
for (var i = 0; i < data.length; i++) {
      (function(i, data) {
        requests.push(function() {
          jQuery.ajax({
            url: 'https://reqres.in/api/users?page=1',
            method: 'GET',
            success: function(result) {
              console.log(i); // 0
              requests[i].apply(undefined, []);
            }
          });
        });
        console.log(i); //counts up
      })(i, data);

    };

 requests[0].apply(undefined,[]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我想知道，这个代码是怎么来的:

for (var i = 0; i < data.length; i++) {
  (function(i, data) {
    requests.push(function() {
      jQuery.ajax({
        url: wpApiSettings.root + 'superdooperendpoint/' + apikey + "/" + data[i].start_date + "/" + data[i].end_date,
        method: 'GET',
        beforeSend: function(xhr) {
          // Set nonce here
          xhr.setRequestHeader('X-WP-Nonce', wpApiSettings.nonce);
        },
        success: function(result) {
          success_callback({
            start_date: data[i].start_date,
            end_date: data[i].end_date,
            span: data[i].span,
            result: result
          });
          console.log(i); // 0
          requests[i].apply(undefined, []);
        }
      });
    });
    console.log(i); //counts up
  })(i, data);

};

当我在成功函数中执行第一个 console.log() 时，它始终为 0，而不是 undefined，但在它在迭代 for 循环中计数的成功函数。我怎样才能让它在 success 函数中计数？

Answer 1

下面绘制了 i 的更新值

并行调用

var data = [{start_date:20180601,end_date:20180701},{start_date:20180801,end_date:20180901},{start_date:20181001,end_date:20181101},{start_date:20181201,end_date:20190101}];
var requests = [];
for (var i = 0; i < data.length; i++) {
  (function(i, data) {
    requests.push(function() {
      jQuery.ajax({
        url: 'https://reqres.in/api/users?page=1',
        method: 'GET',
        success: function(result) {
          console.log(i);
        }
      });
    });
  })(i, data);

};

for (var i = 0; i < requests.length; i++) {
  requests[i].apply(undefined, []);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

顺序调用

var data = [{start_date:20180601,end_date:20180701},{start_date:20180801,end_date:20180901},{start_date:20181001,end_date:20181101},{start_date:20181201,end_date:20190101}];
var requests = [];
for (var i = 0; i < data.length; i++) {
  (function(i, data) {
    requests.push(function() {
      jQuery.ajax({
        url: 'https://reqres.in/api/users?page=1',
        method: 'GET',
        success: function(result) {
          console.log(i);
          i++;
          if(i < requests.length) {
            requests[i].apply(undefined, []);          
          }
        }
      });
    });
  })(i, data);

};

requests[0].apply(undefined, []);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

说明 - 当您迭代函数时，对于 requests 数组中的每个函数，都会传递/存储 i 值，就像争论。当您从外部调用 requests[0] 时，函数完成后，i 的存储值(即 0)将被绘制。然后，您再次触发存储在 index = 0 处的函数，即最终创建了一个无限循环。为了绘制适当的值，请循环 requests 数组并一一调用各个函数以查看记录的 i 的适当值。