Run code upon arrival of DOM elements, when you have no event to listen for

runWhenArrived.js

/**
 * Poll for presence of DOM elements until they
 * are found (or until timeout is reached), and then
 * call a function as soon as a non-empty result is found
 *
 * @param  {string}   selector CSS selector to check for
 * @param  {Function} fn       callback function(jqSelector, elapsedTimeInMs) {}
 * @param  {int}      timeout  timeout in ms (optional)
 * @param  {int}      interval polling interval in ms (optional)
 */
function runWhenArrived (selector, fn, timeout, interval) {
  var _interval = interval || 10; //ms
  var _timeout = timeout || 3000; //ms
  var maxIterations = _timeout/_interval;

  var ct = 0;
  var task = null;

  var check = function () {
    ct++;
    if (ct > maxIterations) {
      // Taking too long! pull the plug
      fn(null, _interval);
      clearInterval(task);
    }
    else {
      // See if our selector is returning non-empty results
      var $jq = $(selector);
      if ($jq.length > 0) {
        // Found something!
        fn($jq, ct * _interval); // Do the work
        clearInterval(task); // All done. no need to keep trying
      }
    }
  };

  task = setInterval(check, _interval);
  return task;
};

I found this useful for tweaking Qunit's test runner UI after it finishes loading and setting its self up.

Example usage:

runWhenArrived('#qunit-modulefilter', function (ele, elapsedMs) {
  if (ele) {
    // SUCCESS
    console.log('formatted qunit select after ' + elapsedMs + ' ms');
    ele.material_select();
  }
  else {
    // FAIL
    console.log('never found it :(');
  }
});