JavaScript 函数调用(在 switch 中)

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 数组是 [ph1 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'...!!!

希望对您有所帮助! 谢谢大家!)

Answer 1

$.get() 是异步的。这意味着虽然 for 循环和 switch 确实以正确的顺序遍历元素，但它们仅启动 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() 进行调试。