JS引入JQ等待就绪的问题。

cqwcns

我正在通过浏览器控制台执行一些JS代码。
首先我需要引入JQuery，再进行其他业务逻辑，大概是这样的：

[JavaScript] 纯文本查看 复制代码

console.log('引入JQuery');
let jquery = document.createElement('script');
jquery.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js";
document.getElementsByTagName('head')[0].appendChild(jquery);
console.log('引入JQuery完成');

console.log('引入其他支持文件');
$("body").append('<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"></link>');
$("body").append('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">');

// 其他业务逻辑
// ...

但经过测试，如果同时输入代码，会报错：


分开输入，即先输入“引入JQuery”部分，再输入“引入其他支持文件”部分，则不会报错。

证明应该是引入JQuery未就绪就调用，导致报错的。


所以，这种情况，如果我要同时输入全部代码，有什么方法可以等等JQuery就绪再继续。


请各位大佬指教，感谢。

k6m4gdt3

粗略写一个，你可以验证下能不能用。

[JavaScript] 纯文本查看 复制代码

function isLoaded() {
    return typeof jQuery == 'function';
}

function doAfterLoaded() {
    console.log("jQuery 已加载，可以做后续的事。");
}

var intervalSeq = setInterval(() => {
    if (!isLoaded()) return;
    doAfterLoaded();
    clearInterval(intervalSeq);
}, 50);

pansong291

console.log('引入JQuery')
let jquery = document.createElement('script')
jquery.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js'
jquery.onload = function () {
    console.log('引入JQuery完成')

    console.log('引入其他支持文件')
    $('body').append('<link  rel="stylesheet"></link>')
    $('body').append(
        '<link  rel="stylesheet">'
    )

    // 其他业务逻辑
    // ...
}
document.getElementsByTagName('head')[0].appendChild(jquery)

steven026

[JavaScript] 纯文本查看 复制代码

await new Promise(resolve=>{
        console.log('引入JQuery');
        let jquery = document.createElement('script');
        jquery.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js";
        document.getElementsByTagName('head')[0].appendChild(jquery);
        jquery.onload=()=>{
            console.log('引入JQuery完成');
            resolve()
        }
    })
console.log('引入其他支持文件');
$("body").append('<link  rel="stylesheet"></link>');$("body").append('<link  rel="stylesheet">');

用await+Promise
控制台支持全局async 所以直接await就行

acexxx

[JavaScript] 纯文本查看 复制代码

let scriptTag = document.createElement('script')
scriptTag.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js'
scriptTag.onload = function () {
    $('body').append('<link  rel="stylesheet"></link>')
    $('body').append( '<link  rel="stylesheet">')
}
document.getElementsByTagName('head')[0].appendChild(scriptTag)