javascript - 数组被覆盖

Question

背景: 我有一个函数，它接受一个本地链接字符串数组，加载每个链接并找到所有 <a>来自每个链接中特定位置的标签，然后推送每个标签的 href属性放入名为 results 的数组中.

问题:函数运行结束后结果数组为空。如果我用 console.log 测试数组的长度或内容在.load()里面函数，数组有内容，如我所料；然而，在该函数之外，数组是空的。

假设: 我认为填充的数组以某种方式被空数组覆盖，但我看不出这是怎么发生的。我什至尝试将结果数组作为全局变量放在主函数之外，但在函数执行后它仍然是空的。

函数

function collectAllTrailLinks(arrayOfSections){
   var result = [];
   var len = arrayOfSections.length;
   $("body").append("<div id='placeHolder'></div>");

   for (var i = 0; i < len; i++) {
      var params = arrayOfSections[i] + " " + "blockquote a";
      $("#placeHolder").load(params, function(){
        $("#placeHolder a").each(function(){
            var link = $(this).attr("href");
            if (link !== "symbols.html") {
                result.push(link);
            }
         });
     }); 
   }
   console.log(result.length);
   //return result;
}

函数调用

function ctRunAll(){
  createTable("#ctSection h1", 16);
  var sectionLinks = collectLinks(hikingContent);
  collectAllTrailLinks(sectionLinks[0]);
}

Answer 1

那是因为传递给 $("#placeHolder").load() 的回调函数是异步执行的。这意味着函数 collectAllTrailLinks() 在第一次调用该回调之前已经完成。

您可以做的是返回一个 promise ，这样您就可以等到所有加载完成。我创建了一个代码片段来演示原生 Promise方式(用 setTimeout 代替 $.load 简化)

var output = document.getElementById('output');

function collectAllTrailLinks() {
    var promises = [];
    for (var i = 0; i < 20; i++) {
        var promise = new Promise(function(resolve, reject) {
            var index = i;
            setTimeout(function() {
                output.innerHTML += 'finished ' + index + ' ';
            	resolve('result of ' + index);
        	}, i * 200);
        });
        promises.push(promise);
    }
    return Promise.all(promises);
}

collectAllTrailLinks().then(function (result) {
    output.innerHTML += '<br /><br />All done: ' + JSON.stringify(result);
});

<div id="output"></div>

JQuery 延迟方式

function collectAllTrailLinks(arrayOfSections) {
   var defer = $.Deferred();
   var result = [];
   var len = arrayOfSections.length;
   var finishedLoads = 0;
   $("body").append("<div id='placeHolder'></div>");

   for (var i = 0; i < len; i++) {
      var params = arrayOfSections[i] + " " + "blockquote a";
      $("#placeHolder").load(params, function(){
        $("#placeHolder a").each(function(){
            var link = $(this).attr("href");
            if (link !== "symbols.html") {
                result.push(link);
            }
         });
         finishedLoads++;
         if (finishedLoads == len) {
             defer.done(result); // mark deferred as done (will resolve promise)
         }
     }); 
   }
   return defer.promise(); // return promise where you can wait on
}

// Usage (wait for promise)
collectAllTrailLinks(arrayOfSections).done(function(result) {
   console.log(result.length);
});

Native Promise 方式

function collectAllTrailLinks(arrayOfSections) {
   var promises = [];

   $("body").append("<div id='placeHolder'></div>");

   for (var i = 0; i < arrayOfSections.length; i++) {
       var promise = new Promise(function(resolve, reject) {
          var params = arrayOfSections[i] + " " + "blockquote a";
          $("#placeHolder").load(params, function(response, status, xhr) {
             if (status === "error") {
                 return reject(response);
             }

             var result = [];
             $("#placeHolder a").each(function() {
                var link = $(this).attr("href");
                if (link !== "symbols.html") {
                   result.push(link);
                }
             });

             resolve(result);
          });
       });
       promises.push(promise);
   }

   return Promise.all(promises);
}

// Usage
collectAllTrailLinks(arrayOfSections).then(function(results) {
   console.log(results.length);
});