[jQuery] Run a list of functions sequentially
I finally got around to building a "run sequentially" plugin:
<span style="font-family: courier new,monospace;">jQuery.sequence = {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
setTimeoutH: function(f, t) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var params = (arguments.length == 3 && arguments[2].constructor == Array) ? arguments[2] :
jQuery.merge([], arguments).slice(2);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> window.setTimeout(function() { f.apply(f, params) }, t);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> },</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> run: function() {
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> if(arguments[0]) arguments[0]();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
if(arguments[1]) jQuery.sequence.setTimeoutH(arguments.callee, 1, jQuery.merge([], arguments).slice(1));</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> },</span>
<br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> runArray: function(array, fn, whenDone) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> if(array[0]) fn.call(array[0], array);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> if(array[1]) jQuery.sequence.setTimeoutH
(arguments.callee, 1, jQuery.merge([], array).slice(1), fn, whenDone);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> else if(whenDone) whenDone();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">}</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">jQuery.fn.sequence = function(fn, whenDone) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> jQuery.sequence.runArray
(this, fn, whenDone);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> return this;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span>
You can do a few things:
$(expr).sequence(function() { console.log(<a href="http://this.id">this.id</a>) }); which will run through each item in the jQuery object and print its id to the console.
$(expr).sequence(function() { console.log(<a href="http://this.id">this.id</a>) }, function() { console.log("Done") }); which will do the same as above and when completely done, print "Done"
$.sequence.run(function() { // first function }, function() { // second function }); which will run the first function and then the second one without locking up the browser
$.sequence.runArray([1,2,3], function() { console.log(this) }); which will print "1", then "2", then "3"
$.sequence.runArray([1,2,3], function() { console.log(this) }, function() { console.log
("Done") }); which will do the same as above and when completely done, print "Done"
The trick here, of course, is that you get looping behavior that shouldn't lock up the browser.
<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph) 718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
<span style="font-family: courier new,monospace;">jQuery.sequence = {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
setTimeoutH: function(f, t) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var params = (arguments.length == 3 && arguments[2].constructor == Array) ? arguments[2] :
jQuery.merge([], arguments).slice(2);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> window.setTimeout(function() { f.apply(f, params) }, t);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> },</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> run: function() {
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> if(arguments[0]) arguments[0]();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
if(arguments[1]) jQuery.sequence.setTimeoutH(arguments.callee, 1, jQuery.merge([], arguments).slice(1));</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> },</span>
<br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> runArray: function(array, fn, whenDone) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> if(array[0]) fn.call(array[0], array);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> if(array[1]) jQuery.sequence.setTimeoutH
(arguments.callee, 1, jQuery.merge([], array).slice(1), fn, whenDone);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> else if(whenDone) whenDone();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">}</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">jQuery.fn.sequence = function(fn, whenDone) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> jQuery.sequence.runArray
(this, fn, whenDone);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> return this;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span>
You can do a few things:
$(expr).sequence(function() { console.log(<a href="http://this.id">this.id</a>) }); which will run through each item in the jQuery object and print its id to the console.
$(expr).sequence(function() { console.log(<a href="http://this.id">this.id</a>) }, function() { console.log("Done") }); which will do the same as above and when completely done, print "Done"
$.sequence.run(function() { // first function }, function() { // second function }); which will run the first function and then the second one without locking up the browser
$.sequence.runArray([1,2,3], function() { console.log(this) }); which will print "1", then "2", then "3"
$.sequence.runArray([1,2,3], function() { console.log(this) }, function() { console.log
("Done") }); which will do the same as above and when completely done, print "Done"
The trick here, of course, is that you get looping behavior that shouldn't lock up the browser.
<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph) 718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/