SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    alternative to window.onload

    The following script is from lynda.com. It's supposed to be an alternative to adding several functions to a window.onload, such as:

    window.onload = initAll;

    function initAll(){
    functionOne();
    functionTwo();
    etc.
    }

    Code:
    addOnLoad(initOne);
    addOnLoad(initTwo);
    addOnLoad(initThree);
    
    function addOnLoad(newFunction){
    	var oldOnLoad = window.onload;
    	
    	if(typeof oldOnLoad == "function"){
    		window.onload = function(){
    			if(oldOnLoad){
    				oldOnLoad();
    			}
    			newFunction();
    		}
    	}
    	else{
    		window.onload = newFunction;
    	}
    }
    They said this way multiple functions that you may need on window load are not overridden and it's better when multiple .js files are used - which I sort of get.

    But I don't understand the function's logic. Bear with me..

    It seems to me that the 1st time addOnLoad is called the else block will run initOne(). The second time addOnLoad is called oldOnLoad will be initOne which runs a second time and newFunction() will run initTwo. And the third time addOnLoad is run, initOne and/or initTwo will run yet again.

    This can't be right. I don't think I'm seeing this logic the right way.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    // First time
    window.onload = initOne;

    Code javascript:
    // Second time
    window.onload = function () {
        if (typeof oldOnLoad == "function") {
            initOne();
        }
        initTwo();
    }

    Code javascript:
    // Third time
    window.onload = function () {
        if (typeof oldOnLoad == "function") {
            function () {
                if (initOne) {
                    initOne();
                }
                initTwo();
            }();
        }
        initThree();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But aren't initOne(), initTwo(), and initThree() being called and run more than once here?

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These functions are not running until the window loads. The window will load after all of these functions have been assigned to the window.onload.

    The first time addLoadEvent is run you set the window.onload = initOne without the prantheses which means you are assigning a reference to the initOne function to window.onload. You are basically saying when the onload event is raised run this function.

    The second time addLoadEvent is run it querys window.onload to see if it has a reference to a function. It does so it needs to create a new function which runs the original onload plus the new function. So we pass a reference to an anonymous function which will execute both these function when window loads (hence parantheses used on the functions this time).

  5. #5
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh ok, I'm getting it . So what happens to initOne() and initTwo() the third time addOnLoad is called?

  6. #6
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly the same thing happens the third time but now we are creating a new function to run the previous anonymous function (which is a function that will call initOne and initTwo) plus initThree.

  7. #7
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really appreciate the replies to this thread. You'll have to forgive me, I'm so used to using window.onload = init;

    function init(){
    //everything i need to run in here

    }

    to control all my needs (which until recently have been basic).

    I'm still having trouble grasping this.. Brian, in your last reply you said the third time around will create another function to run the previous anonymous function containing initOne and initTwo.

    So the third time around will run initOne, initTwo AND initThree?

    I just don't understand why each new run through addOnLoad needs to run the previous function(s) again.

  8. #8
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything we are talking about here is "When the page has loaded do this..". Nothing has happened. We haven't run anything yet. We are assigning functions that must be run when the page has loaded. If there is already a function assigned to be run when the page loads then we are saying o.k. run that plus this too when the page loads.

  9. #9
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohh ok. If this line:

    newFunction();

    is what keeps stacking other functions to run on window load, or, after the window has loaded then I think I understand. Thanks.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    It's the following that keeps stacking other old functions to run on window load

    Code javascript:
    var oldOnLoad = window.onload;
    ...
    if(oldOnLoad){
    	oldOnLoad();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •