Question

With jquery is it possible to have a function being fired as soon as a conditional statement turns from false to true?

I am looking for a solution that does not consume all the system’s resources (ie: Not setInterval(function(){},1) ).

In the end I used .scroll() rather than the more ambitious suggestions below.

Answer 1

Unless the height of an element is changed, you only need to observe the resize and scroll events. So try this:

$(window).bind('resize', handler);
$(document).bind('scroll', handler);

Since these events can be fired quite often, you should keep the handler operations at a minimum. You could, for example, cache the $ calls using a closure:

var handler = (function(a, b){
    return function(event) {
        if ((a.scrollTop() + a.height()) == b.height()) {
            /* … */
        }
    })($('#lay3b_top'), $('#measuring_wrapper'));

Here the variables a and b inside the inner function that is returned by the outer function are bound to the return values of $('#lay3b_top') and $('#measuring_wrapper') respectively. (function(){})() is an anonymous function expression that is immediately called with the given arguments to bind the arguments to the function’s scope.