如何在Javascript onload事件中实现回调

Question

我真的不明白......我是Javascript的初学者。

我已将我的功能onLoadDocument附加到document.onload事件中。

在function111()和function222()完成他们的工作之后，绝对必须执行回调函数。

实际上，回调执行得太快，导致function111和function222出现问题。

如何在function111和function222完成工作时执行回调函数？

function onLoadDocument(event, callback) {
    function111();
    function222();
    callback();
}

function after() {
    firstOpeningWindow = false;
}

document.onload = onLoadDocument(event, after);

Answer 1

问题是回调是一个函数引用，但是这一行：

onLoadDocument(event, after)

是一个函数调用，因此立即运行。此外，它是window有load事件，而不是document。

function onLoadDocument(callback) {
    function111();
    function222();
    callback();
}

function after() {
    firstOpeningWindow = false;
}

// You have to supply a function reference here. So, to pass arguments
// you'd need to wrap your function invocation in another function that
// will be the callback
window.onload = function() { onLoadDocument(after) }; 

Answer 2

问题是window.onload（作为另一个答案的评论者说，document.onload不存在）接受一个函数，该函数在事件发生时执行。你没有在这里传递一个函数，你传递的是onLoadDocument(event, after)的返回值。这是undefined - 为此，浏览器正在执行该功能，这对您来说太早了。

解决方案就是让onLoadDocument返回一个函数：

function onLoadDocument(event, callback) {
    return function () {
        function111();
        function222();
        callback();
    }
}

function after() {
    firstOpeningWindow = false;
}

window.onload = onLoadDocument(event, after);

Answer 3

调用函数时会调用该函数，因此：

document.onload = onLoadDocument(event, after);

...立即调用onLoadDocument并将返回值赋给onload（这是没有意义的，因为返回值不是函数）。

如果你想采用这种方法，那么你需要编写一个使用闭包生成onload函数的工厂：

function onLoadDocumentFactory(callback) {
    function onLoadDocument(event) {
        function111();
        function222();
        callback();
    }
    return onLoadDocument;
}

function after() {
  firstOpeningWindow = false;
}

document.onload = onLoadDocument(after);

也就是说，使用现代的addEventListener按顺序添加功能会更容易。

function function111() {
  console.log(111);
}

function function222() {
  console.log(222);
}

function after() {
  console.log("after");
}

addEventListener("load", function111);
addEventListener("load", function222);
addEventListener("load", after);