Question

我对此触发器.get()有几个$(window).on('load', function () {请求。

我需要加载脚本文件但仅，当所有这些请求都完成/完成（元素在页面上）后，如何使用下面的代码来完成？

我是JS的新手，所以我需要一点帮助将一些“检查”和“脚本文件加载”功能添加到代码中。

Answer 1

使用您当前的代码，我看到两个简单的解决方案。

一个接一个地执行请求，但这是在回调地狱的方向上进行的：

$.get('mysite1.html', {}, function(data) {
    var $response = $('<div />').html(data);
    var $div_1 = $response.find('#div_1');
    $('#container-div-1').append($div_1);

    $.get('mysite2.html', {}, function(data) {
        var $response = $('<div />').html(data);
        var $div_1 = $response.find('#div_1');
        $('#container-div-2').append($div_1);

        // Load your script
    },'html');
},'html');

另一种解决方案是创建在回调中使用的通用函数，该函数将完成您的工作并检查两个函数是否都已完成：

var toProcess = 2;
var processed = 0;

function process(data, id) {
    var $response = $('<div />').html(data);
    var $div_1 = $response.find('#div_1');
    $(id).append($div_1);

    processed++;

    if (processed === toProcess) {
        // Load your script
    }
}

$.get('mysite1.html', {}, function(data) {
    process(data, '#container-div-1');
},'html');  
$.get('mysite2.html', {}, function(data) {
    process(data, '#container-div-2');   
},'html');

但是，如果您不必支持Internet Explorer，或者可以加载一些polyfill，我真的建议您使用内置的Fetch API函数和Promise。希望这样使用Promise.all，它正在等待您的所有承诺得到解决：

const mysite1Request = fetch('mysite1.html').then(function(data) {
    var $response = $('<div />').html(data);
    var $div_1 = $response.find('#div_1');
    $('#container-div-1').append($div_1);
});
const mysite2Request = fetch('mysite2.html').then(function (data) {
    var $response = $('<div />').html(data);
    var $div_1 = $response.find('#div_1');
    $('#container-div-2').append($div_1);
});

Promise.all([mysite1Request, mysite2Request]).then(function() {
    // Load your script
})

如果所有.get（）请求均已完成，则加载脚本文件

1 个答案: