如何在执行下一行之前等待执行完成

Question

标题说明了一切.我找到了一些答案(关于回调等等),但我不知道如何将它应用到我的代码中.

问题:如何$( "#layout-grid" ).load(layout);在执行下一行之前等待完成？

最后一行的警报不会在第一次执行时显示,因为$( "#layout-grid" ).load(layout);尚未完成加载.但是,警报会在第二次执行时正确显示.

function setLayout(selectedLayout) {
    layout += selectedLayout;
    $( "#layout-grid" ).load(layout); // this load is not finished yet before alert
    var top_level_div = document.getElementById('layout');
    var count = top_level_div.getElementsByTagName('div').length;
    alert(count);
}

Answer 1

您可以将.load()调用传递给第二个参数,这是一个在完成后将触发的回调.看这里:

function setLayout(selectedLayout) {
    layout += selectedLayout;
    $( "#layout-grid" ).load(layout, function(){
        var top_level_div = document.getElementById('layout');
        var count = top_level_div.getElementsByTagName('div').length;
        alert(count);
    }); 
}

希望这可以帮助.

Answer 2

$.load()采用可选的回调参数.您必须在函数中完成加载后需要执行的代码,并将该函数传递给$.load.

你的例子看起来像那样:

function setLayout(selectedLayout) {
    layout += selectedLayout;
    $( "#layout-grid" ).load(layout, function afterLoad() {
        var top_level_div = document.getElementById('layout');
        var count = top_level_div.getElementsByTagName('div').length;
        alert(count);
    }); 
}