Question

我是Javascript中的一个大菜鸟，这可能是一系列问题中的第一个！

这就是我要做的事情：

我有一个包含几个.txt文件的文件夹，名为art1.txt，art2.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文件。如果代码没有通过执行endLoop函数找到文件artN.txt（意味着文件夹中没有更多文件），我想打破循环

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

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

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

感谢阅读！

Answer 1

在do-while循环中引入结束条件：

function init(){
  var stopLooping = false;

  do {

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

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

        function endLoop() { 
            stopLooping = true; 
        };

     }); //end of doAjax         

     $.ajax(getArt);

 } while ( !stopLooping );

} //end of init

该代码的问题是，ajax是异步运行的，它会发出另外x次不成功的调用，直到从第一个错误处理程序返回时循环实际停止。

Answer 2

这可以帮助你完成你想要的。虽然，我仍然建议使用服务器端脚本语言来更有效地完成此任务。

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;
    }
  }

}

打破包含AJAX类型函数的for循环

2 个答案: