在 html 中运行 js 函数，而 script 标签具有 defer 属性集答案

【问题标题】：Running a js function in html while the script tag has a defer attribute set在 html 中运行 js 函数，而 script 标签具有 defer 属性集
【发布时间】：2021-12-02 10:35:59
【问题描述】：

HTML 文件 <head> 部分中 script 标记的 defer 属性。这几乎总是意味着我无法在 HTML 中运行 js 函数，因为只有在加载 HTML 文件后才会加载 js 文件。..

我遇到了一种情况，我需要在我的 HTML 文件中运行一个 js 函数，但由于 js 文件中有其他函数，我不想从脚本标签中删除 defer 属性。我查看了使用 async 的可能性，但也没有帮助。

关于如何做到这一点的任何想法......除了使用延迟？我仍然希望将 script 标记保留在 head 中，但这样做意味着我没有打开（非基于函数的）指令链接的 js 文件...这并不总是理想的。

这是 HTML 文件的示例

temp.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="temp.js" defer></script>
    <title>Defer et al</title>
</head>

<body>
    <script>
        runThisFunction('Home');
    </script>
</body>

</html>

这里是一个js文件的示例

temp.js

function runThisFunction(varin) {
    console.log(varin);
}

如果我从 js 文件中删除 defer，该函数将运行；如果我把它留在那里，或者改用异步，该函数将不会运行，因为它还没有加载。

对于这个小问题的任何帮助将不胜感激。

【问题讨论】：

是什么阻止您使用多个脚本？

标签： javascript html asynchronous deferred script

【解决方案1】：

最好的方法是重构你的脚本以在函数中包含一个入口点，并在 DOM 加载后运行该函数。而不是，例如

// temp.js

function runThisFunction(varin) {
    console.log(varin);
}

document.querySelector('.foo').textContent = 'doing stuff';
// other code here

将依赖于正在加载的页面的所有功能放入自己的函数中：

// temp.js

function runThisFunction(varin) {
    console.log(varin);
}

function init() {
  document.querySelector('.foo').textContent = 'doing stuff';
  // other code here
}
window.addEventListener('DOMContentLoaded', init);

这样，如果您还删除了defer 属性，runThisFunction 将立即可用，但代码的其他部分在页面加载之前不会运行。

【讨论】：