Question

我尝试创建一个用于创建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 pp]，我可以获得另一个顺序的数据，如[h1 h1 pppp]或[pp h1 h1 pp]（它使函数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'... !!!

希望你能帮忙！谢谢大家！）

Answer 1

$.get()是异步的。这意味着虽然for循环和开关确实以正确的顺序通过元素，但它们只启动AJAX调用。当从服务器收到响应时，将调用回调函数（包括setText()调用）。由于对服务器的调用可能需要不同的时间，因此无法保证它们以与调用它们相同的顺序返回。

一种解决方案可能是在回调之外创建空元素，并仅在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
        });

附注：由于各种原因，最好使用the console代替alert()进行调试。

Answer 2

我已经建立了另一个解决方案：感谢#Juhana。 Ajax调用可以同步：

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

但感谢您的帮助！

JavaScript函数调用（在switch中）

2 个答案: