jquery mouse gestures/btn queuing

Question

Hi. I am using jquery super gestures, http://www.evanbot.com/article/super-gestures-jquery-plugin/22, for an interface on a site.

I want each gesture I use to have a series of actions assigned to it e.g:

• When one movement (say moving the mouse to the left) is performed by the user it fades in a div with a nice graphic prompting the user to do something else

• When the same movement is performed it fades in a different div forgetting about the last action it performed for that movement.

This could go on and on until it runs out of actions for that particular movement. I would then apply this to a whole series of mouse movements up, down , left, right, circle, zig-zag etc

My question is, how do i get jQuery to move through a series of actions in this manner?

Many thanks in advance.

Answer 1

You can use javascript arrays to hold the queue of actions to be performed

var queue = [];

queue.push(function() { 
   alert('hello world') 
}); 
queue.push(function() {
   alert('goodbye cruel world');
});

Then, when the gesture is performed you can use

...
callback: function(gesture) {
   if(0 == queue.length) {
       ...
   } else if('circle-clockwise' == gesture) {
       var fn = queue.shift(); // get the first element in queue
       fn();
   }  
   ...
} 
...

to call the next action in queue.

Note: You can write the function call as queue.shift()(); as well if you want to be shorter.