This idea borned when reading the work of Ben Alman for function throttle : http://benalman.com/projects/jquery-throttle-debounce-plugin/
In that case the problem is to execute a function no more than once every T milliseconds. This is very helpful when you want to control how much an event handler is called back. I put a common example for events that are called intensively, like mousemove, or drag in my raphaël tutorial: http://cancerbero.vacau.com/
The thing is that function throttle made me think on the opposite problem: being notified when a function is called N times in a time lapsus of T milliseconds. This can be useful for registering double, triple, cuadruple clicks, and in general nth-clicks events.I call this, function inBetween (don't have a better name, suggestions accepted). See for example, how I would use inBetween with jquery for neing notified when a triple click occurs in between 1000 ms:
function click3Hendler(evt) {
alert(this.clickCount+" clicks detected. last click xcoord: "+evt.clientX);
};
$("#someElement").click(inBetween(3, 1000, cb, {clickCount: 3}));
This is a complete working example: http://jsfiddle.net/RP7mW/11/.
Also there is a section in my raphaël tutorial for registering nth-click listeners to raphaël shapes using inBetween(). Link: http://cancerbero.vacau.com/raphaeltut/index.html#sec-events-inbetween
And this is the inBetween function code:
/**
* inBetween resolves the problem of being notified when a function is called N times in in between a time lapsus of T ms.
* @param n the amount of times.
* @param t the time lapsus in ms
* @param callback - the function to be called when the returned fcuntion is called at least n times in a lapsus of n ms.
* @return a new function - when that function is called n times in a lapsus
of t ms, then callback function will be called using the context object as
the callback context.
*/
function inBetween(n, t, callback, context) {
var sb = [];
sb.push("var that = arguments.callee; ")
sb.push("var thisTime = new Date().getTime(); ")
sb.push("var arr = that['ARR'];");
sb.push("if(!arr){");
sb.push(" arr = []; ");
sb.push(" for(var i = 0; i < that['N']; i++) arr.push(thisTime); ");
sb.push(" that['ARR'] = arr;");
sb.push(" that['COUNT']=0");
sb.push("}");
sb.push("that['COUNT']++; ");;
sb.push("arr.push(thisTime);");
sb.push("var lastTime = arr.shift();");
sb.push("if(that['COUNT'] >= that['N']) {");
sb.push(" that['COUNT']=1; ");
sb.push(" for(var i = 0; i < that['N']; i++) arr[i] = thisTime; ");
sb.push(" if(thisTime-lastTime < that['T']) ");
sb.push(" that['CB'].apply(that['CTX'], arguments); ");
sb.push("}");
var fn = new Function(sb.join(""));
fn['N']=n;
fn['T']=t;
fn['CB']=callback;
fn['CTX']=context;
return fn;
};
Hope this can be of some use for those who need some advance event - function stuff like this.
No hay comentarios:
Publicar un comentario