Downshift Your Code » Yahoo! User Interface Blog

Downshift Your Code » Yahoo! User Interface Blog
As a concrete example, consider the resize event. In most browsers, the resize event fires after the user has finished resizing the window, meaning that the event is fired once for each window resize. Internet Explorer, on the other hand, fires the resize event continuously as the user is resizing the browser. If you have anything more than some simple calculations being applied during onresize, it’s possible to end up confusing IE by having too much going on (especially if the event handler does any UI manipulations). The solution is to throttle your code so that a method is called a maximum number of times per second. This can be achieved using timeouts and a little bit of indirection. The basic pattern is as follows:

YAHOO.namespace("example");

YAHOO.example.MyObject = {

    _timeoutId : 0,
    _process : function () {
        //processing code goes here
    },

    process : function () {
        clearTimeout(this._timeoutId);
        var me = this;
        this._timeoutId = setTimeout(function(){
            me._process();
        }, 250);
    }
};