面试题：jQuery的队列，队列可以用在哪些地方

我就是我 2021-11-05 03:52 344阅读 0赞

一、队列是什么？

队列是一种数据结构，跟生活中的排队是一样的,符合先进先出,后进后出的原则

即:对一个数组做一些限制：

1、只允许在后面插入数据,只允许在前面删除数据

2、不允许在后面删除数据,也不允许在前面插入数据,也不允许在中间随便插入和删除数据.

二、jQuery的队列函数：queue();

jQuery的队列中存放的是函数。

<table style="margin-left:-1.35pt;"> 
 <tbody> 
  <tr> 
   <td style="width:196.65pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">.clearQueue()</span></p> </td> 
   <td style="width:410.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">从队列中删除所有未运行的项目。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:196.65pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">.dequeue()</span></p> </td> 
   <td style="width:410.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">从队列最前端移除一个队列函数，并执行它。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:196.65pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">jQuery.dequeue()</span></p> </td> 
   <td style="width:410.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">从队列最前端移除一个队列函数，并执行它。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:196.65pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">.queue()</span></p> </td> 
   <td style="width:410.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">显示或操作匹配元素所执行函数的队列。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:196.65pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">jQuery.queue()</span></p> </td> 
   <td style="width:410.1pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">显示或操作匹配元素所执行函数的队列。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

三、队列的简单示例：

1、定义函数：

function testf1()\{  
    alert('testf1');  
\}

function testf2()\{  
    alert('testf2');  
\}

//2、入队

$.queue(document,"qName1",testf1);//给document对象下创建一个队列,起名为qName1,并存入testf1函数  
$.queue(document,"qName1",testf2);//给document对象下的队列（上一句已经创建队列了）qName1,存入testf2函数

3、点击，然后出队

$("\#box1").click(function()\{

$.dequeue(document,"qName1");//执行testf1时,弹栈就行  
    $.dequeue(document,"qName1");//执行testf1时,弹栈就行

\})

四、jQuery中的哪些函数使用了队列？

在jQuery的animate，slideDown，slideUp，show，hide，fadeIn，fadeOut等动画函数中使用了队列。

调用每个动画函数，就是把该动画的功能入队。注意：出队时，如果函数有异步操作，那么会等待异步执行完毕后，再去执行下一个函数

如下代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#box1{
    				position: absolute;
    				left:0px;
    				width: 50px;
    				height: 50px;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box1">
    			
    		</div>
    	</body>
    </html>
    <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    
    //在jQuery的animate里就使用了队列.
    //一个animate函数是把要执行动画的函数放在了队列里.可以完成,动画的依次执行.
    
    $("#box1").click(function(){
    	//
    　　$(this).animate({width:300},2000); //animate函数会把这个动画的功能入队到$("#box")的队列里
    
    　　$(this).animate({height:300},2000);
    
    　　$(this).animate({left:300},2000);  
    
    })
    
    </script>

以上代码的执行：

1、等待第一个动画执行完毕

2、再执行第二个动画

3、再执行第三个动画

五、一个案例（使用队列的案例）

1、先不入队（不使用入队）：

<!DOCTYPE>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    
    </head>
    <body>
    <style>
    #box {
    	position:absolute; 
    	left:50px; 
    	top:30px;
    	width:60px; 
    	height:60px;
    	background:green; 
    }
    
    #box.newcolor { 
    	background:blue;
     }
    </style>
    	<div id="box">
    		
    	</div>
    <script>
    	
    $("#box").click(function(){	
    	//1 不使用队列
    	
    	$("#box").animate({left:'+=200'},2000);//入队列(animate函数内部会入队)
    	$("#box").animate({top:'+=200'},2000);//入队列(animate函数内部会入队)
    	$("#box").addClass("newcolor");//主要是这块没有入队
    	$("#box").animate({left:'-=200'},2000);//入队列
    	$("#box").removeClass("newcolor");//主要是这块没有入队	
    
    	
    });
    </script>
    </body>
    </html>

2、入队（现在加上入队）：

$("#box").animate({left:'+=200'},2000);//入队列(animate函数内部会入队)
    	$("#box").animate({top:'+=200'},2000);//入队列(animate函数内部会入队)
    	$("#box").queue(function(){//入队
    		$("#box").addClass("newcolor");
    		$("#box").dequeue();	
    	});
    	
    	$("#box").animate({left:'-=200'},2000);//入队列
    	$("#box").queue(function(){//入队
    		$("#box").removeClass("newcolor");//没有入队,所以,不会等等动画执行完毕,
    		$("#box").dequeue();	
    	});

对比一下使用入队和不用入队的效果