[jQuery] Run a list of functions sequentially
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><o:SmartTagType
namespaceuri="urn:schemas-microsoft-com:office:smarttags" name="PersonName"/>
<!--[if !mso]>
<style>
st1\:*{behavior:url(#default#ieooui) }
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>This I’ll be playing with ASAP,
thanks Yehuda!!<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>-ALEX<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <b><span style='font-weight:bold'>On Behalf
Of </span></b>Yehuda Katz
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, December 27, 2006
4:04 PM
<b><span style='font-weight:bold'>To:</span></b> <st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>
<b><span style='font-weight:bold'>Subject:</span></b> [jQuery] Run a list of
functions sequentially</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I finally got around to building a "run sequentially" plugin:
</span></font><font face="Courier New"><span style='font-family:"Courier New"'>jQuery.sequence
= {
setTimeoutH: function(f, t) {
var params = (arguments.length == 3 &&
arguments[2].constructor == Array) ? arguments[2] : jQuery.merge([],
arguments).slice(2);
window.setTimeout(function() { f.apply(f, params) }, t);
},
run: function() {
if(arguments[0]) arguments[0]();
if(arguments[1])
jQuery.sequence.setTimeoutH(arguments.callee, 1, jQuery.merge([],
arguments).slice(1));
},</span></font> <font face="Courier New"><span style='font-family:"Courier New"'>
runArray: function(array, fn, whenDone) {
if(array[0]) fn.call(array[0], array);
if(array[1]) jQuery.sequence.setTimeoutH (arguments.callee,
1, jQuery.merge([], array).slice(1), fn, whenDone);
else if(whenDone) whenDone();
}
}
jQuery.fn.sequence = function(fn, whenDone) {
jQuery.sequence.runArray (this, fn, whenDone);
return this;
}</span></font>
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 <o:p></o:p>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/