jQuery队列控制方法详解queue()/dequeue()/clearQueue()

来源：互联网发布：apache目录访问权限编辑：程序博客网时间：2024/06/08 00:38

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <style>body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53}div,h2,p,input,select{margin:0;padding:0}input{vertical-align:middle}h1{font-size:1em;font-weight:normal}h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none}h1 a:hover{background:#a40000;color:#fff;text-decoration:underline}h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative}input{margin:10px 0 10px 20px;padding:3px 8px;font-size:14px;font-weight:bolder;}#demo{position:relative;width:630px;height:300px;background:#eee;border-top:5px solid #888;border-bottom:5px solid #888}.one,.two,.three,.four,.five,.six,.seven{display:block;position:absolute;left:30px;top:0;width:30px;height:30px;background:#888;color:#fff;text-align:center;font-weight:bold;line-height:30px}.two{left:120px}.three{left:210px}.four{left:300px}.five{left:390px}.six{left:480px}.seven{left:570px}</style></head> <body><h1><a href="http://mrthink.net/">Mr.Think的个人博客</a><br/>@专注前端技术,热爱PHP,崇尚简单生活.</h1><h3>返回文章页:<a href="http://mrthink.net/jqueryapi-queue-dequeue/">jQuery队列控制方法详解queue()/dequeue()/clearQueue()@Mr.Think</a></h3> <input type="button" value="停止动画"/><div id="demo"><span class="one">01</span><span class="two">02</span><span class="three">03</span><span class="four">04</span><span class="five">05</span><span class="six">06</span><span class="seven">07</span></div> <script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script><!--<script data-rocketsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/rocketscript"></script>--><script>$(function(){//可用animate()方法如此眩晕地实现//$('.one').delay(500).animate({top:'+=270px'},500,function(){//$('.two').delay(500).animate({top:'+=270px'},500,function(){//$('.three').delay(500).animate({top:'+=270px'},500,function(){//$('.four').delay(500).animate({top:'+=270px'},500,function(){//$('.five').delay(500).animate({top:'+=270px'},500,function(){//$('.six').delay(500).animate({top:'+=270px'},500,function(){//$('.seven').animate({top:'+=270px'},500,function(){//alert('按序落体运动结束! Yeah!')//});//});//});//});//});//});//});//还可以利用queue()方法简明自如的实现var _slideFun=[//把要执行的动画依次放入一个数组function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);}];var _zts = [//把要执行的动画依次放入一个数组function(){$('.one').delay(500).animate({top:'+=270px'},500,tz);},function(){$('.three').delay(300).animate({top:'+=270px'},500,tz);},function(){$('.five').delay(300).animate({top:'+=270px'},500,tz);},function(){$('.four').delay(300).animate({top:'+=270px'},500,tz);},function(){$('.two').delay(300).animate({top:'+=270px'},500,tz);},function(){$('.six').delay(300).animate({top:'+=270px'},500,tz);},function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){alert('按序落体运动结束! Yeah!');});}];//将函数数组放入slideList动画队列$('#demo').queue('slideList',_zts);var _takeOne=function(){//取出第一个函数,并执行它$('#demo').dequeue('slideList');};var tz = function(){$("#demo").dequeue("slideList");} tz();//初始执行第一个函数//_takeOne();$(':button').click(function(){$(this).val('刷新重试').attr('disabled',true).css('color','#ccc');//停止也可用载入空数组实现$('#demo').queue('slideList',[]);$('#demo').clearQueue('slideList');});});</script></body></html>

0 0