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

注意：尽管浏览器将在第一次调用后从缓存中加载文件，但是这种幼稚的方法将始终在每次调用runLazy()时向DOM中添加一个新的脚本标签。如果您打算多次调用该函数，则不妨先使用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);