Вызовы функций JavaScript (в переключателе)

Я пытаюсь сделать код для создания HTML-кода, но я застрял здесь.

function generateText(elements, type) {
  for (var i = 0; i<elements.length; i++) {
    alert(elements[i]);
    switch (elements[i]) {
        case "p":
            alert("here p");
            var num = Math.floor((Math.random() * 3) + 1);
            var link = "text/" + type + "/p/" + num + ".html";
            $.get(link, function(data) {
                setText(data);
                alert("setting p");
            });
        break;

        case "h1":
        alert("here h1");
            var num = Math.floor((Math.random() * 3) + 1);
            var link = "text/" + type + "/h1/" + num + ".html";
            $.get(link, function(data) {
                setText(data);
                alert("setting h1");
            });
        break;

    }
  }
}

Проблема в том, что если elements массив, например, [p h1 p h1 p p], я могу получить данные в другом порядке, например, [h1 h1 p p p p] или [p p h1 h1 p p] (это делает функцию setText()).

Я думал, что функции называются так:

generateText() -> switch -> case "p" -> case "h1" -> case "p" ... !!!-> $.get() 'in p' -> $.get() 'in h1' -> $.get() 'in p' ...!!!

но я хочу иметь что-то вроде этого:

generateText() -> switch -> case "p" -> $.get() 'in p' -> case "h1" -> $.get() 'in h1' -> case "p" -> $.get() 'in p'... !!!

Надеюсь, вы поможете! Спасибо всем!)

Источник

2 ответа

Решение

$.get() асинхронный Это означает, что хотя цикл for и переключатель проходят через элементы в правильном порядке, они только инициируют вызов AJAX. Функция обратного вызова (которая включает в себя setText() call) вызывается, когда ответ получен с сервера. Поскольку вызовы на сервер могут занимать различное количество времени, не гарантируется, что они возвращаются в том же порядке, в котором они были вызваны.

Одним из решений может быть создание пустых элементов вне обратного вызова и установка содержимого только после завершения вызова AJAX. Не зная что setText() да, идея примерно такая:

        var link = "text/" + type + "/p/" + num + ".html";
        var elem = document.createElement( 'p' );
        document.body.appendChild( elem );  
            // elements are now in the DOM in the correct order

        $.get(link, function(data) {
            elem.innerHTML = data;  // set the contents when AJAX call finishes
        });

Примечание: лучше использовать консоль вместо alert() для отладки по разным причинам.

Источник

Я нашел другое решение: спасибо за #Juhana. Ajax-вызов может быть синхронизирован:

$.ajax({
    async: false,
    type: 'GET',
    url: link,
    success: function(data) {
         //callback
    }
});

но спасибо за помощь!

Источник
Другие вопросы по тегам