Question

我尝试了一个ajax循环并得到了不一致的结果（在检索到SVG并附加到id之后，在我的init函数中执行了函数结果）。

当我使用多个gets时，我的不一致结果不存在。看起来SVG被检索并附加到id但是没有在init中正确执行，这使我相信在检索和加载svg之前可能会遇到init中的某些函数。我正准备使用文件。

我通常在when中使用多个获取，然后使用then来获取我的图像并将它们附加到他们的ID，但我希望获得更多有关ajax的知识。因为SVG是从外部获取的，所以我没有在这里包含它们。但是，包括所有html和javascript（尝试和使用多个获取svgs的真实方式，以及使用ajax循环的不一致方式）。任何人都可以指出我在循环版本出错的地方吗？

＆＃13;

//tried and true way of loading svgs; consistent results
/*($(document).ready(function() {
		$(window).load(function() {
          
	$.when(
		$.get("pathToImgs/one.svg", function(svg) {
			$("#one").append(svg.documentElement);
		}),
		$.get("pathToImgs/two.svg", function(svg) {
			$("#two").append(svg.documentElement);
		}),
		$.get("pathToImgs/three.svg", function(svg) {
			$("#three").append(svg.documentElement);
		}),
		$.get("pathToImgs/four.svg", function(svg) {
			$("#four").append(svg.documentElement);
		}),
		$.get("pathToImgs/five.svg", function(svg) {
			$("#five").append(svg.documentElement);
		})
		})
	).then(init);
          
	});
});*/

$(document).ready(function() {
  $(window).load(function() {

    //new way of loading svgs; getting inconsistent results
    var path = "pathToImgs/";

    var categories = ["one", "two", "three", "four", "five"];

    var promises = [];

    function appendSvgToId(i) {
      return function() {
        promises.push($.get(path + categories[i] + ".svg", function(svg) {
          $("#" + categories[i]).append(svg.documentElement);
        }))
      }
    }


    for (var i = 0; i < categories.length; i++) {
      svgMainPromises.push(appendSvgToId(i));
    };


    $.when()
      .always(promises)
      .then(init);

    function init() {
      alert("svgs loaded!");
    }

  });
});

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <div>
    <div>
      <div><a id="one"></a></div>
      <div><a id="two"></a></div>
      <div><a id="three"></a></div>
      <div><a id="four"></a></div>
      <div><a id="five"></a></div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

如果您想在运行init之前等到所有SVG都已加载，那么您需要将$.get次来电传递给$.when。在这里使用.always() 不正确。

你只需要将promises推送到一个数组中，无论是手动还是循环都无关紧要。

var path = "pathToImgs/";
var categories = ["one", "two", "three", "four", "five"];

// Array to hold promises from `$.get` calls
var svg_promises = [];

function init(){
    alert("svgs have been loaded!");
}

// Closure to capture each value of `i`.
// Otherwise, `i` will be the same value
// at the end of the loop, because the callbacks
// will run after the `for` is done and will use
// that value of `i`.
function svg_callback(i){
    return function(svg){
        $("#" + categories[i]).append(svg.documentElement);
    };
}

for(var i = 0; i < categories.length; i++){
    // Add each promise to the array
    svg_promises.push($.get(path+categories[i] + ".svg", svg_callback(i)));
}

// Add another SVG to the list
svg_promises.push($.get("extra.svg", function(svg){
    $("#extra").append(svg.documentElement);
}));

// Call `$.when` with all the promises
$.when.apply($, svg_promises).then(init).then(function(){
    // Second callback...
});

Ajax循环：获得不一致的结果

1 个答案: