jquery12 queue() : 队列方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script> jQuery.extend({
queue ------------------- push()
dequeue -------------- shift()
_queueHooks
});
jQuery.fn.extend({
queue
dequeue
delay
clearQueue
promise
}); //队列中存储的都是函数 $(function(){
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
$.queue( document , 'q1' , aaa );//q1是队列名字
$.queue( document , 'q1' , bbb );
$.queue( document , 'q1' , [aaa,bbb] );
console.log( $.queue( document , 'q1' ) );//输出队列所有函数 $.dequeue( document,'q1' ); //从头取一个,aaa()
$.dequeue( document,'q1' ); //从头取,bbb()
------------------------------------------------------------------
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
$(document).queue('q1',aaa);
$(document).queue('q1',bbb);
console.log( $(document).queue('q1') );//[aaa,bbb] $(document).dequeue('q1');//1
$(document).dequeue('q1');//2 });
//[ ]
</script>
</head> <body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script> $(function(){ $('#div1').click(function(){
//不是一起变化,先宽完了之后在高最后left,使用队列完成。
$(this).animate({width : 300},2000); setInterval
$(this).animate({height : 300},2000); setInterval
$(this).animate({left : 300},2000); setInterval
}); $('#div1').click(function(){ $(this).animate({width : 300},2000).queue(function(next){ $(this).css('height',300);
next(); //也可以写成 $(this).dequeue(); }).animate({left : 300},2000); $(this).animate({width : 300},2000,function(){//第一个animate执行完之后走回调,回调中打开一个定时器就完了,再执行第二个animate,定时器是异步操作,将会跟第二个animate一起进行。 //$(this).css('height',300);
var This = this;
var timer = setInterval(function(){
This.style.height = This.offsetHeight + 1 + 'px';
if( This.offsetHeight == 200 ){
clearInterval(timer);
}
},30); }).animate({left : 300},2000); $(this).animate({width : 300},2000).queue(function(next){ var This = this;
var timer = setInterval(function(){
This.style.height = This.offsetHeight + 1 + 'px';
if( This.offsetHeight == 200 ){
next();
clearInterval(timer);
}
},30); }).animate({left : 300},2000); });
------------------------------------------------------------- function aaa(){
alert(1);
} function bbb(){
alert(2);
} $.queue( document , 'q1' , aaa );
$.queue( document , 'q1' , bbb );
$.queue( document , 'q1' , [ccc] );//ccc是数组时候覆盖aaa,bbb
console.log( $.queue( document , 'q1') ); $.dequeue( document , 'q1' );//出队时候函数aaa要执行一次 ----------------------------------------------------------------
function aaa(){
alert(1);
} function bbb(){
alert(2);
} $(document).queue('q1',aaa);
$(document).queue('q1',bbb); console.log( $(document).queue('q1') );//查看[function, function]0:function aaa()1:function bbb() $(document).dequeue('q1');
$(document).dequeue('q1'); }); </script>
</head> <body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
//delay() : 延迟队列的执行
$(function(){
$('#div1').click(function(){
$(this).animate({width : 300},2000).animate({left : 300},2000);
$(this).animate({width : 300},2000).delay(2000).animate({left : 300},2000);
//队列全部执行完之后,再去调用
$(this).promise().done(function(){
alert(123);
});
});
});
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
jquery12 queue() : 队列方法的更多相关文章
- jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理
//对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this ...
- stack堆栈容器、queue队列容器和priority_queue优先队列容器(常用的方法对比与总结)
stack堆栈是一个后进先出的线性表,插入和删除元素都在表的一端进行. stack堆栈的使用方法: 采用push()方法将元素入栈: 采用pop()方法将元素出栈: 采用top()方法访问栈顶元素: ...
- 8.12 day31 进程间通信 Queue队列使用 生产者消费者模型 线程理论 创建及对象属性方法 线程互斥锁 守护线程
进程补充 进程通信 要想实现进程间通信,可以用管道或者队列 队列比管道更好用(队列自带管道和锁) 管道和队列的共同特点:数据只有一份,取完就没了 无法重复获取用一份数据 队列特点:先进先出 堆栈特点: ...
- python并发编程-进程间通信-Queue队列使用-生产者消费者模型-线程理论-创建及对象属性方法-线程互斥锁-守护线程-02
目录 进程补充 进程通信前言 Queue队列的基本使用 通过Queue队列实现进程间通信(IPC机制) 生产者消费者模型 以做包子买包子为例实现当包子卖完了停止消费行为 线程 什么是线程 为什么要有线 ...
- C++ 标准模板库STL 队列 queue 使用方法与应用介绍
C++ 标准模板库STL 队列 queue 使用方法与应用介绍 queue queue模板类的定义在<queue>头文件中. 与stack模板类很相似,queue模板类也需要两个模板参数, ...
- C#基础---Queue(队列)的应用
Queue队列,特性先进先出. 在一些项目中我们会遇到对一些数据的Check,如果数据不符合条件将会把不通过的信息返回到界面.但是对于有的数据可能会Check很多条件,如果一个数据一旦很多条件不 ...
- atitit. java queue 队列体系and自定义基于数据库的队列总结o7t
atitit. java queue 队列体系and自定义基于数据库的队列总结o7t 1. 阻塞队列和非阻塞队列 1 2. java.util.Queue接口, 1 3. ConcurrentLink ...
- C#部分---特殊集合:stack栈集合、queue队列集合、哈希表集合。
1.stack栈集合:又名 干草堆集合 栈集合 特点:(1)一个一个赋值 一个一个取值(2)先进后出实例化 初始化 Stack st = new Stack(); //添加元素用push st.Pus ...
- Python自动化运维之16、线程、进程、协程、queue队列
一.线程 1.什么是线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行 ...
随机推荐
- laravel中的数据迁移和数据填充
laravel中的数据迁移和数据填充 标签(空格分隔): php 生成迁移文件两种方式: 1 新建一个表的迁移文件 php artisan make:migration create_students ...
- Hadoop框架基础(二)
** Hadoop框架基础(二) 上一节我们讨论了如何对hadoop进行基础配置已经运行一个简单的实例,接下来我们尝试使用eclipse开发. ** maven安装 简单介绍:maven是一个项目管理 ...
- MyBatis、JDBC、Hibernate区别
从层次上看,JDBC是较底层的持久层操作方式,而Hibernate和MyBatis都是在JDBC的基础上进行了封装使其更加方便程序员对持久层的操作. 从功能上看, JDBC就是简单的建立数据库连接,然 ...
- Spring 注解拦截器使用详解
Spring mvc拦截器 平时用到的拦截器通常都是xml的配置方式.今天就特地研究了一下注解方式的拦截器. 配置Spring环境这里就不做详细介绍.本文主要介绍在Spring下,基于注解方式的拦截器 ...
- C# HashSet<T> 简单使用
一个简单的HashSet<T> 的例子,介绍其简单的方法,深入学习可参考微软:https://msdn.microsoft.com/en-us/library/bb359438(v=vs. ...
- ReactiveCocoa使用记录-网络登录事件
对于一个应用来说,绝大部分的时间都是在等待某些事件的发生或响应某些状态的变化,比如用户的触摸事件.应用进入后台.网络请求成功刷新界面等等,而维护这些状态的变化,常常会使代码变得非常复杂,难以扩展.而 ...
- Vue2.4.0 新增的inheritAttrs,attrs
官方inheritAttrs,attrs文档https://cn.vuejs.org/v2/guide/components-props.html,从最下面的'非 Prop 的特性'开始看,看到最后 ...
- spring mvc 防止重复提交表单的两种方法,推荐第二种
第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...
- mysql查询今天,昨天,近7天,近30天,本月,上一月数据
近期项目中用到了查询当月数据记录的功能,最初的想法是在逻辑业务里构造好时间段进行查询,当写sql语句时感觉挺麻烦.所以就到网上搜索了一下,看看是不是能有简单的方法.果然.网络资源非常强大.以下结合我的 ...
- C++学习笔记11-面向对象2
1. 仅仅能初始化直接基类 一个类仅仅能初始化自己的直接基类.直接就是在派生列表中指定的类.假设类C 从类B 派生,类B 从类A 派生,则B 是C 的直接基类.尽管每一个C 类对象包括一个A 类部 ...