尝试与window.onload一起执行两个JavaScript文件

Question

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

我尝试在其中一个JS文件和window.onload上使用window.onloadend，但结果相同，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();
}