Javascript中的延迟加载函数

在我们的代码中，有时我们需要一个函数在页面加载一段时间后进行加载，比如缓存网站的文章，而在页面加载过程中，这是不需要的

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

例如：

lazyload函数xyz（）{
//把你的代码放在这里
}

---

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

首先，您应该区分“延迟加载”和“延迟加载”

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

---

我不确定你的需求是否是严格意义上的惰性加载。但它们的实现非常相似。假设您不想使用模块，我会这样做

想法：将延迟加载的代码放在一个单独的文件中，并通过向DOM添加

脚本

标记来加载该文件。然后为此操作设置任意触发器以实现延迟加载

在

main.js

中：

---

如果您只是想要延迟加载，请为每个延迟加载的函数创建一个

.js

文件：

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

runLazy("func1");

例如

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");

函数runLazy（funcName）{
常量标记=``；
document.querySelector（“head”）.insertAdjacentHTML（“beforeed”，tag）；
}
runLazy（“func1”）；

---

注意：虽然浏览器将在第一次调用后从缓存加载文件，但这种简单的方法总是在每次调用

runLazy（）

时向DOM添加一个新的脚本标记。如果要多次调用该函数，您可能希望使用

loadDelayed（）

，然后正常调用该函数。

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

let script=document.createElement（'script'）；
script.src=“/caching.js”；
document.body.append（脚本）；

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

默认情况下，动态加载的脚本的行为类似于

async

，但您可以通过显式地将

async

属性设置为

false

，将“首次加载–首次执行”的顺序更改为将脚本追加到文档中的顺序：

---

您可以稍后加载文件。此文件中没有特定的函数。在DOM就绪并加载之前，您可以保持函数的执行。没有什么理由延迟加载函数，但是您可以像@AnandG所说的那样延迟调用函数。

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

runLazy("func1");

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

script.async = false;

document.body.append(script);