在for循环中使用jQuery顺序执行两个函数

时间:2017-06-28 01:25:41

标签: javascript jquery ajax asynchronous

我对Javascript很陌生。请不要太苛刻:)

我有两个函数,这两个函数都涉及在for循环中执行jQuery请求。例如,

function a(n,locations) {
  for (var i = 0; i < n; i ++) {
    $.ajax({
      url: 'https://geocoder.cit.api.here.com/6.2/geocode.json',
      type: 'GET',
      dataType: 'jsonp',
      jsonp: 'jsoncallback',
      data: {
        searchtext: input,
        app_id: APP_ID,
        app_code: APP_CODE,
      },
      success: function (data) {
        handleData(data,locations);
      }
   });
 }

handleData()函数将从jQuery数据更改空数组locations。我的函数b(m)具有相似的格式,但会使用更新的位置作为输入。

现在,我有一个c(n,m),我希望顺序执行a()b()

function c(n,m) {
  var locations = [];
  a(n,locations);
  b(m,locations);
}

从以前的答案中我了解到,通过使用promises(例如.then)可以实现顺序执行涉及jQuery调用的函数。但是,此解决方案仅在a(n)返回promise时适用,这在for循环结构下无法实现。您能否分享一下您如何解决这个问题的见解?在此先感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我建议recursion而不是你的for循环。例如,您可以像这样调用函数recursionExample

function a(n) { 
  return new Promise ((resolve, reject) {
    (function recursionExample(a) { 
      if (a === n) {
          resolve;
      } else {
          $.ajax({ url: 'https://geocoder.cit.api.here.com/6.2/geocode.json', 
          type: 'GET', 
          dataType: 'jsonp', 
          jsonp: 'jsoncallback', 
          data: { 
              searchtext: input, 
              app_id: APP_ID, 
              app_code: APP_CODE, 
          }, 
          success: function(data) { 
            handleData(data);
            recursionExample(a + 1);
          } 
        }); 
      }
    })(0);
  });
}

然后,您可以使用promise.then功能。像这样......

function c(n,m) { 
    var locations = []; 
    a(n,locations)
    .then (function() {
        b(m,locations); 
    });
}