在 Javascript 的 for 循环中等待函数的执行？ [复制]

Question

我有一个类似于以下内容的脚本：

function1() {
    for(i < 5) {
        function2(i);
    }
}

function2(i) {
    $jqueryHere;
}

基本上，我有一个 for 循环，它调用第二个函数一定次数。但是，第二个函数只包含 jQuery，我不知道如何强制 for 循环等待 function2() 的执行完成，然后再继续进行下一次迭代并增加变量 i。

编辑：这是第二个函数中的特定 jQuery 代码（我使用 typed.js 在我的网站上写出行）：

function type(n, text, print) {
  $('#line' + (n + 1)).typed({
      strings: text[i],
      typeSpeed: 3,
      backDelay: 500,
      loop: false,
      contentType: 'html',
      loopCount: false,
      callback: function() {
        $('#line' + (n + 1)).siblings('.typed-cursor').remove();
        $(print[n]).insertAfter('#line' + (n + 1));
      }
  });

  $(".reset").click(function(){
      $('#line' + (n + 1)).typed('reset');
  });
}

Answer 1

编辑：我建议只使用promises，并调用then() 五次，但是如果您希望能够调整要调用异步函数的次数，则需要跟踪两次之间的迭代次数异步调用。您可以通过将调用次数存储在外部范围中来做到这一点，或者您可以像我在下面所做的那样通过将其作为参数传递来做到这一点。

function f1(i) { 
  if (!i || i < 5) // nullguard the parameter so function can be called as 'f1()'
    f2(i || 0);
}

function f2(i) {
  $ajax.onComplete = function () { f1(i+1); }
  $doAjax();
}

将计数器存储在外部作用域中的示例如下：

(function () {
  var count = 0;

  function f1() {
    if (count < 5) 
      f2();
  }

  function f2() {
    $ajax.onComplete = function () { count++; f1(); }
    $doAjax();
  }
})()