SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onAvailable() doPoll trigger once

    Hi,
    I'm following peter.michaux.ca - The window.onload Problem (Still) with this code

    Code JavaScript:
    <html>
     <head>
     
    <script type="application/javascript">
    var stack = [],
        interval,
        loaded; // has window.onload fired?
     
    function doPoll() {
      var notFound = [];
    alert(stack.length);
      for (var i=0; i<stack.length; i++) {
        if (document.getElementById(stack[i].id)) {
          stack[i].callback();
        } else {
          notFound.push(stack[i]);
        }
      }
      stack = notFound;
      if (notFound.length < 1 || loaded) {
        stopPolling();
      }
    }
     
    function startPolling() {
      if (interval) {return;}
      interval = setInterval(doPoll, 10);
    }
     
    function stopPolling() {
      if (!interval) {return;}
      clearInterval(interval);
      interval = null;
    }
     
    function onAvailable(id, callback) {
      stack.push({id:id, callback:callback});  
      startPolling();
    }
     
    window.onload = function() {
      loaded = true;
      doPoll();
    };
    onAvailable('google', function(){
      document.getElementById('google').onclick = function() {alert(this.id);};
    });
    onAvailable('yahoo', function(){
      document.getElementById('yahoo').onclick = function() {alert(this.id);};
    });
     
     
    </script>
    </head>
    <body>
      <h1>Search Engines</h1>
      <div><ul id="engines">
        <li id="google">Google</li>
        <li id="yahoo">Yahoo!</li>
      </ul></div>
     
    </body>
    </html>

    I'm waiting to see alert(stack.length)
    trigger three times
    once on window.onload
    twice setInterval(doPoll, 10);
    but I see it once why ?
    Can you explain me, please ?

    Thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your trying to ask your script to search for 2 elements which don't exist on the page yet, when using document.getElementById() it either needs to be loaded within window.onload() or before the ending </body> element on the page. See the examples below

    Loaded within window.onload()
    Code JavaScript:
    window.onload = function() {
        loaded = true;
        doPoll();
     
        onAvailable('google', function(){
            document.getElementById('google').onclick = function() {alert(this.id);};
        });
     
        onAvailable('yahoo', function(){
            document.getElementById('yahoo').onclick = function() {alert(this.id);};
        });
    };

    Loaded before the ending </body> element
    HTML Code:
    <script type="text/javascript">
    onAvailable('google', function(){
        document.getElementById('google').onclick = function() {alert(this.id);};
    });
    
    onAvailable('yahoo', function(){
        document.getElementById('yahoo').onclick = function() {alert(this.id);};
    });
    </script>
    
    </body>

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Your trying to ask your script to search for 2 elements which don't exist on the page yet,
    actually the snippet works

    in the tutorial (It's just about to avoid window.onload and bottom script tag technique)
    The Yahoo! UI event library has two functions to help implement unobtrusive JavaScript and these functions cleverly avoid all the assumptions and problems of the bottom script and Dean Edwards script. Instead of trying to determine when the entire DOM is ready, the YUI library polls the DOM with document.getElementById() until a particular element is found or the window.onload event fires. When document.getElementById() does finally return the element then the element is clearly in the DOM and it should be relatively safe to add event listeners to the element.


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
  •