如何检查脚本是否已加载并执行?

huangapple go评论72阅读模式
英文:

How to check if script is already loaded and executed?

问题

我有一个抽象脚本,any-script.js。它被包含在HTML中,或者在需要时加载。我有一些代码调用其他一些代码,这些代码调用加载的脚本中的函数。我该如何检查此脚本是否已经加载了100%并执行了?我不知道将调用哪些代码,它只是一些抽象的回调。
如果我动态加载这个脚本,一切都很好,我可以添加一个事件监听器,等待它触发script.addEventListener("load")。但如果我的脚本已经带有异步属性存在于DOM中,并且已加载,我不能简单地添加一些事件监听器,因为它不会触发。另一方面,我不能确定脚本是否已加载,因为DOM中的script标签 !== 脚本已加载

  1. script.addEventListener("load") - 仅在您百分之百确定脚本尚未加载时有效
  2. DOM中的script标签 !== 脚本已加载
    也许存在某些浏览器API可以正确检查这一点?
英文:

I have an abstract script, any-script.js. It is included it into the html, or it is loading if it is needed. I have some code which calls some some other code, which calls function from loaded script. How can I check this script to know if it loaded 100% and executed? I don't know what code will be called, it is just some abstract callback.
If I load this script dynamically, all goes fine, I can add an event lister and to wait until it fires script.addEventLister("load"). But if my script is already in DOM with async attribute, and if it is loaded, I can't just add some evet listener, because it will not fire. At other side I can't to be sure, that the script was loaded. Because script tag in dom !== script is loaded.

  1. script.addEventLister("load") - is working only if you 100% know, that the script is not loaded
  2. script tag in dom !== script is loaded

May be exists some browser api to correctly check this?

答案1

得分: 0

我有一个小片段有时用来检查函数是否准备好因此要知道你的JavaScript是否已加载只需测试其函数之一
不是最干净的方法但可以工作...

function fireWhenReady(function1, callback) {
    if (typeof function1 != 'undefined') {
        if (callback && typeof (callback) === "function") {
            callback();
        }
    } else {
        setTimeout(fireWhenReady, 100);
    }
}

//调用
fireWhenReady(你的函数的名称, function () {
   // 函数已准备好
});
英文:

I have a little snippet I'm using sometimes to check if a function is ready. So to know if your js is loaded you just test 1 of its function.
Not the cleanest but that can work...

function fireWhenReady(function1, callback) {
    if (typeof function1 != 'undefined') {
        if (callback && typeof (callback) === "function") {
            callback();
        }
    } else {
        setTimeout(fireWhenReady, 100);
    }
}

//call
fireWhenReady(NAME OF YOU FUNCTION, function () {
   // function is ready
});

答案2

得分: 0

目前还没有官方API来检查这一点。但有一些方法可以实现这个目标。

  • 如果脚本是动态加载的,你必须添加一个load事件监听器 script.addEventListener("load", event => ...)
  • 如果脚本已经在DOM中,它必须有一个onload属性,用于跟踪加载状态并全局记录这些信息。
  • 如果脚本已经在DOM中,你可以将它从DOM中移除,然后再次动态加载它(不是很好的方式),使用第一种方法。

如何维护这一点完全取决于你的思路。

也许在未来我们会有一种更一致的方式。

英文:

Currently there is no official API to check this. But there are some approaches to achieve this.

  • If script is loaded dinamicaly, you have to add an load event listener script.addEventListener("load", event => ...)
  • If script is already in DOM, it must have an attribute onload, to track loading state and to write somhere globaly this info.
  • If script is already in DOM, you can remove it from DOM and load it dimaicaly one more time (shit way), using first variant.

How to maintain this it is only your brain fu..

May be in the future we will have some more consistent way.

huangapple
  • 本文由 发表于 2023年1月9日 17:08:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/75055083.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定