Javascript中的延迟加载函数

Question

在我们的代码中，有时我们需要一个函数在页面加载一段时间后加载，例如缓存网站文章之类的东西，这在页面加载发生时是不需要的。

我想知道我们是否可以编写或使用一些可以延迟加载该特定函数的语法。

例：

lazyload funnction xyz(){
// put your code here
}

如果有任何方法可以做到这一点或类似的方法，如果您向我指出任何模式、框架等，那很好。

Answer 1

首先，您应该区分"延迟加载"和"延迟加载"。

• 延迟加载非常具体地意味着在必要时加载。在这种情况下，这意味着尝试运行一些代码，如果未加载，则加载并运行。这意味着负载将紧随其后运行。
• 延迟加载意味着出于任何原因在任意决定的时间加载，而不必立即运行代码。换句话说，延迟加载是延迟加载的超集。

---

我不确定您的需求是否是严格的延迟加载。但它们的实现足够相似。这就是我会这样做的方式，假设你不想使用模块。

想法：将延迟加载的代码放在单独的文件中，并通过向 DOM 添加script标记来加载文件。然后为此操作设置任意触发器以实现延迟加载。

在main.js：

function loadDelayed() {
const tag = "<script src='delayed.js'></script>";
document.querySelector("head").insertAdjacentHTML("beforeend", tag);
}
// E.g. trigger via timeout after 5 seconds
setTimeout(loadDelayed, 5000);

在delayed.js：

function myDelayedFunc() {
// Your code here
}

---

如果您只想延迟加载，请为每个延迟加载的函数创建一个.js文件：

例如func1.js：

(() => {
// Your code here
})();

并在main.js创建一个帮助程序函数：

function runLazy(funcName) {
const tag = `<script src='${funcName}.js'></script>`;
document.querySelector("head").insertAdjacentHTML("beforeend", tag);
}
runLazy("func1");

注意：虽然浏览器会在第一次调用后从缓存中加载文件，但这种天真的方法总是会在每次调用 DOM 时添加一个新的脚本标签runLazy().如果您打算多次调用该函数，则可能希望使用loadDelayed()然后正常调用该函数。

Answer 2

您可以使用JavaScript动态添加脚本：

let script = document.createElement('script');
script.src = "/caching.js";
document.body.append(script);

脚本添加到文档后将开始加载。

默认情况下，动态加载脚本的行为类似于async，但您可以通过将async属性显式设置为false来将顺序从"首次加载 – 首次执行"更改为追加到文档中的顺序：

let script = document.createElement('script');
script.src = "caching.js";
script.async = false;
document.body.append(script);