Question

在JavaScript中，我第三次调用相同的函数，但每次都返回订单更改。您可以在下面看到我的代码。有时page1.html首次加载page2.html

我该如何解决这个问题？

提前致谢

$(document).ready(function () {
    $("#button").click(function () {
        addHtml('page1');
        addHtml('page2');
        addHtml('page3');
    });
});

function addHtml(url) {
    if ($("#" + url).length == 0) {
        $.get(url+'.html', function (result) {
            $('.divtest').append(result);
        });
    }
};

Answer 1

这是因为你使用http调用来获取页面html是异步的，意味着非阻塞。因此，它取决于响应时间，首先会添加哪个页面。

您可以返回承诺return $.get(url+'.html')，然后按顺序将它们链接起来。

function addHtml(url) {
    return $.get(url+'.html');
};

$("#button").click(function () {
    addHtml('page1')
    .then(function(result){
        $('.divtest').append(result);
        return addHtml('page2');
     })
    .then(function(result){
        $('.divtest').append(result);
        return addHtml('page3');
     })
     .then(function(result){
        $('.divtest').append(result);
     })
});

Answer 2

一个简单的解决方案：

$(document).ready(function () {
    $("#button").click(function () {
        addHtml('page1', function(){
          // page 1 added
          addHtml('page2', function(){
            // page 2 added
            addHtml('page3', function(){
              // All HTML added
            });
          });
        });
    });
});

function addHtml(url, callback) {
    if ($("#" + url).length == 0) {
        $.get(url+'.html', function (result) {
            $('.divtest').append(result);
            callback();
        });
    }
};

Jquery函数返回订单问题

2 个答案: