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

一、队列是什么？

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

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

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

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

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

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

.clearQueue()	从队列中删除所有未运行的项目。
.dequeue()	从队列最前端移除一个队列函数，并执行它。
jQuery.dequeue()	从队列最前端移除一个队列函数，并执行它。
.queue()	显示或操作匹配元素所执行函数的队列。
jQuery.queue()	显示或操作匹配元素所执行函数的队列。

三、队列的简单示例：

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();	
	});

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

田江

发布了219 篇原创文章 · 获赞 347 · 访问量 34万+

他的留言板关注

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

猜你喜欢