CODEWITHSUNDEEP
javascriptcallbackonloaddom-events
La Page PT
La Page PT

Reputation: 621

How to implement a callback in Javascript onload event

I really don't understand... I'm a beginner in Javascript.

I have attached my function onLoadDocument to the document.onload event.

The callback function absolutely have to be executed after function111() and function222() have totally finished their job.

Actually, the callback is executed too soon and it causes a problem to function111 and function222.

How to execute the callback function ONLY when function111 and function222 will have finished their job?

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

function after() {
    firstOpeningWindow = false;
}

document.onload = onLoadDocument(event, after);

Upvotes: 0

Views: 2667

Answers (3)

Robin Zigmond
Robin Zigmond

Reputation: 18249

The problem is that window.onload (as a commenter on another answer said,, document.onload doesn't exist) takes a function, which is executed when the event happens. You're not passing in a function here, you're passing in the return value of onLoadDocument(event, after). This is undefined - and to get that, the browser is executing the function, which is too early for you.

The solution is just to have onLoadDocument return a function:

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

function after() {
    firstOpeningWindow = false;
}

window.onload = onLoadDocument(event, after);

Upvotes: 1

Quentin
Quentin

Reputation: 943608

The function is called when you call the function, so:

document.onload = onLoadDocument(event, after);

… calls onLoadDocument immediately and assigns the return value to onload (which is pointless because the return value is not a function).

If you want to take this approach, then you need to write a factory which generates your onload function using a closure:

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

function after() {
  firstOpeningWindow = false;
}

document.onload = onLoadDocument(after);

That said, it would be easier just to add your functions in order using the modern 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);

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

The issue is that a callback is a function reference, but this line:

onLoadDocument(event, after)

is a function invocation and therefore runs immediately. Also, it's window that has a load event, not 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) };

Upvotes: 3

Related Questions