jQuery array of callback functions

I almost immediately found the limitation of jQuery’s single callback function..restricting. I read about using a wrapper function to call the other functions I wanted called, but the problem with that was the inability to add or remove functions from that list.

One thing I like to do on a page is have JSON object hanging out near the bottom of the page source that is basically a session object. I will write server side session variables to it so I can easily access them in my JS code. For example.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("a.funcToggle").click(function(){
		var f = $(this).data('func');
		($.inArray(f,funcs.enFuncs) != -1) ?
			funcs.enFuncs.splice($.inArray(f,funcs.enFuncs) ,1):
			funcs.enFuncs.push(f);
		$(this).toggleClass("disabled enabled");
	});
 
	$("#functionsGo").click(function(){
		if(funcs.enFuncs.length == 0) alert("No functions enabled");
 
		for(var i=0; i < funcs.enFuncs.length; i++)
			window[funcs.enFuncs[i]]();
	});
});
 
f1 = function(){ alert("f1 called"); }
f2 = function(){ alert("f2 called"); }
f3 = function(){ alert("f3 called"); }
f4 = function(){ alert("f4 called"); }
 
funcs = {enFuncs:[]}
</script>
<style type="text/css">
.enabled {color:red;}
.disabled {color:green;}
</style>
 
<span class="enabled">Enabled</span> / <span class="disabled">Disabled</span><br /><br />
<a href="#" class="funcToggle disabled" data-func="f1">Toggle f1!</a><br /><br />
<a href="#" class="funcToggle disabled" data-func="f2">Toggle f2!</a><br /><br />
<a href="#" class="funcToggle disabled" data-func="f3">Toggle f3!</a><br /><br />
<a href="#" class="funcToggle disabled" data-func="f4">Toggle f4!</a><br /><br />
<button id="functionsGo">Execute functions</button>
  1. No comments yet.
(will not be published)