The examples provided by Jeremy Vinding would allow the function to occur the very moment the resize event occurs and every 250ms afterwards as resizing events are sent in Internet Explorer. In contrast, Nicholas’ tip mimics Firefox and the function will be called 250ms after resizing has not occurred for 250ms, which we assume means resizing has stopped.

Very nice.

A push button to start an animation (250ms animation), you can click the button during the animation, but this event will not affect the animation process.

The responsibility of the process methods are:
1. To offer a public entry to start the process
2. To determine if the entry is available
3. To control the availability timer

The responsibility of the _process method are:
1. This method is a behavior who get the event, and drive it in to the certain component or apply certain functionalities directly.
2. This method could be outside of the object (YAHOO.example.MyObject) and using another scope.

Here is a new scenery:
If the process method also has a new responsibility: collecting the event information (ex: e.type), and eventually you need another information from the event (ex: mouse position). In this case you need to modify the process method, to solve the problem, and from the point of view of the maintenance and the logic of the business, the _process method is the one who must do this job.

I’m seeing this in 3 layers:
1. process method: mechanism to control the availability of the real method
2. _process method: collect the event information, and begin a certain behavior
3. external or internal method: who do the real job

@Doekman - About your code:

1. In the first pass, you call _process, and set the timeout
2. (less than 250ms) you set the _work2do=true only
3. when timeout arrive, (the event object was expired, you can mitigate this issue passing the event’s attributes according to Nicholas), you call _process and set the work2do=false, and set the time out again
4. when the second time out arrive, you call _process again, with the last event reference (who already expire, twice)
5. And at this point, you’re back to the first state…

Ok, I got it, you vary my pattern to warrant the execution of the last event (even when this event are fired between a delay’s process).

@Caridy: your solution is much better, but I consider it the same pattern, only a better revision. The only thing is you might not handle the last call to “process”.

My call:


YAHOO.example.MyObject = {

process : function ( e ) {
var me = this;
var handler = function() {
me._process( e );
if (me._work2do) {
me._work2do = false;
me._timeoutId = setTimeout(handler, 250);
}
}
this._work2do=true;
if (!this._timeoutId) {
handler();
}
}
};


I wouldn’t recommend using setInterval() because it will cause the processing to occur at periodic intervals; this code makes the case that you don’t want it to happen at regular intervals, however, you want to make sure it doesn’t happen too often within a set period of time.

@Caridy - That is a good question. It’s my position that processing should be separate from event handlers and the event object should never be passed as an argument to function that does processing (please see my talk for more details on that).

I’d recommend assigning an event handler that, in turn, calls process(), such as:

function handleResize(e){
YAHOO.example.MyObject.process();
}

If you need information on the event object, I’d recommend just passing in the information that you need rather than the entire event object (again, for maintainability purposes):

function handleResize(e){
YAHOO.example.MyObject.process(e.type);
}

As always you came out with the Good stuff, Thanks. In this case I have a couple of notes:

- What if I need the event’s reference? in this case the reference can’t be passed to the _process method because the event will expire during the delay.

- In your code, the _process method will be called 250ms after the firing, and this is Ok for the example (resizing the window), but if you need to process the event immediately and then the process’s method will be unavailable by 250ms, I think this is a useful pattern too.

The alternate pattern is as follows:


YAHOO.namespace("example");

process : function ( e ) {
var me = this;
if (this._available) {
this._process( e );
this._available = false;
clearTimeout(this._timeoutId);
this._timeoutId = setTimeout(function(){
me._available = true;
}, 250);
}
}
};