Ajax Loop: получение несогласованных результатов

Я пробовал свою руку в цикле ajax и получаю противоречивые результаты (результаты функции, выполняемые внутри моей функции init после того, как SVG извлекаются и добавляются к id).Ajax Loop: получение несогласованных результатов

Мои противоречивые результаты не существуют, когда я использую несколько запросов. Похоже, что SVG извлекаются и присоединяются к идентификаторам, но не выполняются внутри init правильно, что заставляет меня думать, что некоторые функции внутри init могут быть обнаружены до того, как svg будет извлечен и загружен. Я использую документ готов.

Обычно я использую несколько адресов внутри when, за которым следует then, чтобы получить мои изображения и добавить их к их идентификатору, но я хочу получить более тесное знание ajax. Поскольку SVG извлекаются извне, я не включил их здесь. Тем не менее, все html и javascript (проверенный и верный способ получения svgs с несколькими get и непоследовательным способом с использованием ajax-циклов) включены. Может ли кто-нибудь указать мне, где я ошибаюсь в версии цикла?

//tried and true way of loading svgs; consistent results 
 
/*($(document).ready(function() { 
 
\t \t $(window).load(function() { 
 
      
 
\t $.when(
 
\t \t $.get("pathToImgs/one.svg", function(svg) { 
 
\t \t \t $("#one").append(svg.documentElement); 
 
\t \t }), 
 
\t \t $.get("pathToImgs/two.svg", function(svg) { 
 
\t \t \t $("#two").append(svg.documentElement); 
 
\t \t }), 
 
\t \t $.get("pathToImgs/three.svg", function(svg) { 
 
\t \t \t $("#three").append(svg.documentElement); 
 
\t \t }), 
 
\t \t $.get("pathToImgs/four.svg", function(svg) { 
 
\t \t \t $("#four").append(svg.documentElement); 
 
\t \t }), 
 
\t \t $.get("pathToImgs/five.svg", function(svg) { 
 
\t \t \t $("#five").append(svg.documentElement); 
 
\t \t }) 
 
\t \t }) 
 
\t).then(init); 
 
      
 
\t }); 
 
});*/ 
 

 
$(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!"); 
 
    } 
 

 
    }); 
 
});

<!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>

источник

2016-02-02 John Stafford

Почему вы вызываете '. Always()' с массивом обещаний и почему у вас есть 'обещания' и' svgMainPromises'? –

Привет Ракета, спасибо за ваш ответ. SvgMainPromises должны быть просто «обещаниями». Мне жаль насчет того. Что касается того, почему я звоню. Всегда с множеством обещаний, я думал, что это нормально. Можете ли вы показать мне лучший способ? –

Посмотрите мой ответ на свой предыдущий вопрос: http://stackoverflow.com/a/35134928/206403 –

Если вы хотите ждать, пока все ваши SVGs загружаются перед запуском init, то вам необходимо пройти $.get вызовы $.when. Использование: .always(): . Неверно.

Вам просто нужно вытолкнуть обещания в массив, неважно, будет ли это вручную или в цикле.

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

источник

2016-02-02 17:35:49

Хм ... Я не получаю их, чтобы даже загружать, когда вы когда-либо. https://plnkr.co/edit/aQ6G9kSxTcEzUtBaHPTx?p=preview; Я использую plunker, когда мой вопрос связан с внешними ресурсами, такими как svgs. Загрузка –

Я изменил ваш плункер, чтобы он соответствовал тому, что делает @RocketHazmat. [Взгляните] (https://plnkr.co/edit/3JPTfoigOSqjna0Lv0uQ) –

Спасибо, @ Mr.Meeseeks. ПОСМОТРИ НА МЕНЯ! Хотя вам все равно нужно делать '$ .when.apply ($, promises)' –

Ajax Loop: получение несогласованных результатов

ответ

Смежные вопросы