Jquery函数返回订单问题

Jquery function return order issue

本文关键字：问题 单问题 函数 返回 Jquery      更新时间：2023-09-26

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

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

您可以返回promise 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);
     })
});

一个简单的解决方案：

$(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();
        });
    }
};
相关文章：