javascript - 中断包含 AJAX 类型函数的 for 循环

Question

我是 Javascript 方面的大菜鸟，这可能是一长串问题中的第一个!

这是我正在尝试做的事情:

我有一个文件夹，其中包含多个名为 art1.txt、art2.txt 等的 .txt 文件(总数可能会有所不同，这很重要)。

我正在构建一个脚本，该脚本将提取每个 txt 文件的文本信息并将它们一个接一个地附加到网页上。这是:

function init(){

 for (var i=1; ; i++) {

  $(function doAjax (){
    var getArt = {  "method"  : "get", 
                    "url"     : "data/ConstitutionLaw/art" + i +".txt", 
                    "success" : successHandler,
                    "error"   : endLoop
                 };

    $.ajax(getArt);

    function successHandler(data){
        console.log(data);
        var newArt = document.createElement('p');
        newArt.setAttribute('class', "article");
        newArt.innerHTML = data;
        $('#artBody').append(newArt);
        }; //end of successHandler
  }); //end of doAjax

    function endLoop() { /* end the for loop */ };
 }; //end of for
} //end of init

目前，我无限次执行 doAjax 函数，因为我不知道我有多少个 txt 文件。如果代码找不到文件 artN.txt (意味着文件夹中没有更多文件)，我想通过执行 endLoop 函数来打破循环

我尝试在函数 doAjax 之后使用 if 语句，但问题是它是一个异步函数，并且 for 循环不会等待 doAjax 结束才开始另一个循环。

如何让 for 循环等到 doAjax 完成后再开始新的循环？

此外，如果您有任何让整体不那么笨拙的建议，请告诉我。 :)

感谢您的阅读!

Answer 1

这应该可以帮助您完成您想要的事情。尽管如此，我仍然建议使用服务器端脚本语言来更有效地完成此任务。

function init(){
  var stop = false;

  for(var i=1; ; i++) {
    $.ajax({
      "async"   : false,
      "method"  : "get",
      "url"     : "data/ConstitutionLaw/art" + i +".txt",
    }).success(function(data){
      console.log(data);
      var newArt = document.createElement('p');
      newArt.setAttribute('class', "article");
      newArt.innerHTML = data;
      $('#artBody').append(newArt);
    }).fail(function(){
      stop = true;
    });

    if(stop) {
      break;
    }
  }

}