代码之家 › 专栏 › 技术社区 › Summer Developer

for循环中ajax调用的顺序和动态数量

jquery javascript

Summer Developer · 技术社区 · 7 年前

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 ,但是,当在success函数之外时,它在迭代for循环中计数。我怎么能让它在 success 功能也一样?

2 回复 | 直到 7 年前

Nikhil Aggarwal 7 年前

以下是 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 数组a值 我 像参数一样传递/存储。当您调用 requests[0] 在函数完成时,从外部 我 即0已上漆。然后,再次触发存储在 index = 0 也就是说,你最终创造了一个无限循环。为了绘制适当的值,在 请求 数组并逐个调用单个函数以查看被记录的i的适当值。

philipp 7 年前

你需要分配 i 到嵌套函数的不同局部变量,并将 我 走出街区;

let i = 0;

for (; i < 100; i++) {
  ((n) => new Promise(
     (res, rej) => setTimeout(res, 100)
    ).then(() => console.log(i,n))
  )(i);
}