网站 › 『编程语言讨论求助区』 › JS引入JQ等待就绪的问题。

cqwcns 发表于 2022-12-2 10:56

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

本帖最后由 cqwcns 于 2022-12-2 11:00 编辑

我正在通过浏览器控制台执行一些JS代码。
首先我需要引入JQuery，再进行其他业务逻辑，大概是这样的：
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').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 发表于 2022-12-2 15:33

本帖最后由 k6m4gdt3 于 2022-12-2 15:34 编辑

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

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

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

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

pansong291 发表于 2022-12-2 21:17

```
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('<linkrel="stylesheet"></link>')
    $('body').append(
      '<linkrel="stylesheet">'
    )

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

steven026 发表于 2022-12-5 09:34

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').appendChild(jquery);
      jquery.onload=()=>{
            console.log('引入JQuery完成');
            resolve()
      }
    })
console.log('引入其他支持文件');
$("body").append('<linkrel="stylesheet"></link>');$("body").append('<linkrel="stylesheet">');
用await+Promise
控制台支持全局async 所以直接await就行

acexxx 发表于 2022-12-8 16:53

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

查看完整版本: JS引入JQ等待就绪的问题。