Create a function like jQuery(document).ready

Question

How can I do that?

It seems that you can have multiple jQuery's ready() functions, and they will all run when the DOM is loaded.

So how can I create my own ready()-like function? :)

Answer 1

First, you need to identify what it is you need the function for - is it to respond to a particular browser event?

jQuery's $(document).ready(fn) uses an array internally to hold the functions to execute when the DOM has loaded. Adding a new ready(fn) call appends the function fn to the array. When the DOM has loaded (which is detected in various ways according to which browser the code is executing within), each function in turn in the array is executed. Any functions added using ready(fn) after the DOM has loaded are executed immediately.

In summary, you can use an array to store the functions to execute whenever it is that you need to execute them.

Take a look at domready, a standalone port of the ready(fn) function from jQuery to get some ideas about how to go about it.

Answer 2

function _addEvent(e, evt, handler){
    if(evt == "ready")
        evt = "DOMContentLoaded";

    if(typeof handler !== 'function')return;
    if (e.addEventListener)
        e.addEventListener(evt, handler, false);
    else if (e.attachEvent)
        e.attachEvent("on" + evt, handler);
    else
    {
        var oldHandler = e["on" + evt];   
        function newHandler(event){
            handler.call(e, event);
            if(typeof oldhandler === 'function')oldhandler.call(e, event);
        }
    }
}
var _events = ["ready", "click", "mousedown"]; //...
var _myLib = function(item){
    function eventWorker(item, event){
        this.add = function(handler){
            _addEvent(item, event, handler);
        };
    }
    for(var i=0;i<_events.length;i++)
        this[_events[i]] = (new eventWorker(item, _events[i])).add;
};
var MyLib = function(item){
    return new _myLib(item);
};

MyLib(document).ready(function(){alert("I am ready!");});

Test => http://jsfiddle.net/vgraN/

Answer 3

It sounds like you want to make an array of functions and append new callbacks to it.

Answer 4

It's not easy to do cross browser.

If you assume the DOMContentLoaded event exists then you can just make

var domready = (function () {
  var cbs = [];
  document.addEventListener("DOMContentLoaded", function () {
    cbs.forEach(function (f) {
      f();
    });
  });

  return function (cb) {
    cbs.push(cb);
  };
})();

You can use other fallbacks like window.onload and a hackish scroll check like jQuery does.

I'd recommend either using domready or reading the source.

Answer 5

Do you want to create a function which when passed a function will call that function at a particular time? (Also, it can be called multiple times.) If so this is how I would do it it. (Based on jQuery code.)

var funcQueue = (function () {
    var funcList = [];

    function runAll() {
      var len = funcList.length, 
          index = 0;

      for (; index < len; index++)
         funcList[index].call();  // you can pass in a "this" parameter here.

    }

    function add(inFunc) {
       funcList.push(inFunc);
    }

})();

To use:

   funcQueue.add(function () { alert("one"); });
   funcQueue.add(function () { alert("two"); });


   funcQueue.runAll();  // should alert twice.