尝试同时执行两个 JavaScript 文件和 window.onload

Question

我有两个单独的 JavaScript 文件链接到一个 HTML 文档，当我运行它时，似乎第二个 JS 文件覆盖了第一个。我认为这与每个文件中调用的 window.onload 有关，但我不确定如何解决这个问题。

我尝试在其中一个 JS 文件上使用 window.onloadend，在另一个 JS 文件上使用 window.onload，但结果相同，window.onloadend 是唯一的文件已执行。

file1.js

function init() {
    applyFunction();
    prefillForm();
    var applyForm = document.getElementById("applyForm");
    applyForm.onsubmit = validate;
}

window.onload = init;

file2.js

function init() {
    currentPage();
    timer();
}

window.onload = init;

Answer 1

每当您分配给 on- 属性时，您将覆盖之前附加到该属性的任何内容，并且当事件触发时，只有最新的处理程序会运行.使用 addEventListener 代替：

window.addEventListener('load', init);

（将其替换为两个文件中的 .onload 行）

或者，如果您没有等待整个文档加载（包括图像之类的内容），您可能会改为监听 DOMContentLoaded，这将更快地触发。 DOM 和所有元素都将被填充，但并非所有资源都已下载：

window.addEventListener('DOMContentLoaded', init);

Answer 2

或者最终您可以将 Init 函数重命名为不唯一的，并在 HTML 中调用一个匿名函数，该函数按顺序调用它们。在 HTML 中调用它们：

load = () => {
   Init1();
   Init2();
}

尝试同时执行两个 JavaScript 文件和 window.onload

Trying to execute two JavaScript files together with window.onload

javascript

onload