Adding Idempotent Event Handling to your Javascript Toolkit

Idempotent transactions are ones which may be repeated without affecting anything. You may have heard of this term when it comes to online banking ,where idempotent transactions are required ,and basically care needs to be taken to rollback , and not accidently charge twice for the same purchase .

So im trying to extend this to a javascript scenario ,where clicking on a button twice in quick succession will be ignored . This may well be used in a registration / payment / complex timed ui / or any other critical operation . Or basically to add a bit of fun to anything event driven !

Explanation

Let us assume that you dynamically add an event to an object . Now with Reusable.DeferredEvent , it throws a similiar api , gives you an option to specify your existing addEvent code -.Popular version of which are :

• quirksmode 's John Resig /Scott Andrew version of addEvent
  
• the Yahoo.Event
• script.aculo.us /Prototype's Event.observe .

So basically what i have is a plug'n play support for handling idempotent events , using your existing javascript toolkits corresponding dynamic event handling capabilities . In the demo page , I have shown how to integrate with these frameworks by uncommenting the suitable line of code as needed.

Which means for configure listenEvent event for every listenTill seconds , for any listenObj object .


In the demos , you will find two scenarios :

• Only unique button click's on Button1 in the range of 1 seconds will be recognised !
• Only unique mouseouts on Button2 in the range of 3 second will be be recognised.

//@param name of instance
//instantName = new Reusable.IdempotentEvent(instantName);
// Step 1 : Instantiation
responsive = new Reusable.IdempotentEvent('responsive');


//@param listenObj - DOM listenTillelement or element id
//@param listenEvent string - Event name (as per your toolkit nomenclature )
//@param listenTill int / string - how frequency to accept event triggers
//@param callBack string - What function to callback eventually

// Step 2 : Exeuction
//responsive.register( listenObj , listenEvent , listenTill , callBack );
responsive.register( btn1, 'click' , btn1.getAttribute('onclickwhen'), 'clicked' );
responsive.register( btn1, 'mouseout' , 1000, 'hovered' );

Demo and Code here .

Technorati Tags: javascript, events, idempotent, code, bhasker, kode, bosky101,