Как реализовать обратный вызов в событии загрузки Javascript

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

Функция вызывается при вызове функции, поэтому:

document.onload = onLoadDocument(event, after);

… вызывает onLoadDocument немедленно и присваивает возвращаемое значение 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);

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

Проблема в том, что обратный вызов является ссылкой на функцию, но эта строка:

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