Thursday, January 29, 2015

jQuery .ensure() Function to Wait for a Condition Before Executing Code

Overview

This is a very nice little plugin I wrote for jQuery to handle situations that don't have callbacks.  You can do this manually in code by adding a timeout but what if the function takes to long, or what make users with a faster device wait for slower devices by over estimating the timeout.

Please note that most libraries have their own callbacks and jQuery had a $().done() mechanism that will do this for common functions and libraries.  This solution is for those odd ball code bits that don't or that you don't have control over.

It takes a few pieces of information:
  • selector
    • The root jQuery selector you are binding to, it will become the this in the isValid call.
    • If your waiting for a new item to be created do $(document).ensure(selector).done().
  • isValid (default $(this).exists())
    • This is the function that is run each iteration.
    • It should be optimized and return a bool result.  Ie don't walk the DOM every time, select the proper parent node into a variable or pass as the selector.
  • delay (default 500 milliseconds)
    • Miliseconds between each iteration.
  • tries (default 0)
    • Maximum number of times to try, 0 for unlimited.

Examples:

Source Code: