- 浏览: 3430908 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
其他参考:jQuery队列控制方法详解queue()/dequeue()/clearQueue() http://panyongzheng.iteye.com/admin/blogs/1844520
原文:http://www.ghugo.com/jquery-ajax-queue/
先来看个需求,页面上有2个ajax call。其中一个ajax需要另一个ajax的数据才能操作。如下面这段代码所描述的
第二个ajax的操作,需要等待第一个ajax的数据才能进行。(ps:当然以上写法是错误的,这里只是描述这个需求)
相信不少人都遇到ajax queue 队列的问题。好在自从jquery 1.3 以后,有个function能够很好的支持队列,那就是queue。
queue(name)
返回指向第一个匹配元素的队列(将是一个函数数组)
要实现ajax队列,可以将ajax引入queue中。如下代码实现
以上代码实现了ajax队列,2个ajax同步执行,其中dequeue用来结束当前ajax,并调用下一个ajax请求。
接下来,我们再来看看另一个ajax 队列的需求(需求二):
在注册的时候验证邮箱、用户名等时候,单个客户端可以频繁发出无数的ajax请求出去,而我们的结果肯定是以最后一个ajax请求为准的。
首先模拟一个服务端页面:
然后是前台页面,假设由一个元素触发:
html代码:
JS代码:
下面是firebug下的执行结果,我连续对dtitle元素点击三次,如愿每5秒才发送一次请求。当然这只是演示的原理,既然发了三次请求,肯定要以最后一次为准,那么可以通过队列的length属性来轮循,一时length变为0了,就是全部请求结束了,你就可以执行你想要的逻辑了
好了,通过上面的代码,应该对queue的用法和ajax队列有一定了解了。人总是要不断追求完美的,粗矿的代码,并不能提升代码水平。既然队列那么常用,那是否需要将这个功能封装?答案是肯定的。网上也有一些已经封装好了的插件。
那就重写$.ajax 这个方法吧。说干就干:
以上代码加入了1个mode变量,有3个值”abort”(中止),”queue”(队列),”sync”同步。
对于需求二,我们用这个封装好的ajax改写并改进下,js代码部分如下:
看到这里,相信你已经完全了解ajax队列了。就算不了解,你也可以直接用封装好的那段js代码,直接用mode: “abort”
就可以了。
原文:http://www.ghugo.com/jquery-ajax-queue/
先来看个需求,页面上有2个ajax call。其中一个ajax需要另一个ajax的数据才能操作。如下面这段代码所描述的
$(function(){ var a_data; $.ajax({ url: "test.php", success: function(data){ a_data = data; }, }); $.ajax({ url: "test.php", success: function(data){ if(a_data == "5"){ //.... } }, }); });
第二个ajax的操作,需要等待第一个ajax的数据才能进行。(ps:当然以上写法是错误的,这里只是描述这个需求)
相信不少人都遇到ajax queue 队列的问题。好在自从jquery 1.3 以后,有个function能够很好的支持队列,那就是queue。
queue(name)
返回指向第一个匹配元素的队列(将是一个函数数组)
要实现ajax队列,可以将ajax引入queue中。如下代码实现
// 第一个ajax请求 $(document).queue("ajaxRequests", function(){ //全局变量,储存第一个ajax请求数据 var a_data; $.ajax({ success: function(data){ a_data = data; $(document).dequeue("myName"); } }); }); // 第二个ajax请求 $(document).queue("ajaxRequests", function() { $.ajax({ success: function(data) { alert(a_data); $(document).dequeue("myName"); } }); }); // 触发queue往下执行 $(document).dequeue("ajaxRequests");
以上代码实现了ajax队列,2个ajax同步执行,其中dequeue用来结束当前ajax,并调用下一个ajax请求。
接下来,我们再来看看另一个ajax 队列的需求(需求二):
在注册的时候验证邮箱、用户名等时候,单个客户端可以频繁发出无数的ajax请求出去,而我们的结果肯定是以最后一个ajax请求为准的。
首先模拟一个服务端页面:
<?PHP sleep(5); exit(time().''); ?>
然后是前台页面,假设由一个元素触发:
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>测试ajax队列</title> </head> <body> <div id="dtitle">点此触发</div> </body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="test.js"></script> </html>
JS代码:
$(function(){ $("body").queue([]); $("#dtitle").click(function(){ $("body").queue(function(){ $.get("test.php?t=" + new Date().getMilliseconds(), function(){ //这一句让queue往下执行; $("body").dequeue(); if ($("body").queue().length == 0) alert("done"); }); }); }); });
下面是firebug下的执行结果,我连续对dtitle元素点击三次,如愿每5秒才发送一次请求。当然这只是演示的原理,既然发了三次请求,肯定要以最后一次为准,那么可以通过队列的length属性来轮循,一时length变为0了,就是全部请求结束了,你就可以执行你想要的逻辑了
好了,通过上面的代码,应该对queue的用法和ajax队列有一定了解了。人总是要不断追求完美的,粗矿的代码,并不能提升代码水平。既然队列那么常用,那是否需要将这个功能封装?答案是肯定的。网上也有一些已经封装好了的插件。
那就重写$.ajax 这个方法吧。说干就干:
(function($) { var ajax = $.ajax, pendingRequests = {}, synced = [], syncedData = [], ajaxRunning = []; $.ajax = function(settings) { // create settings for compatibility with ajaxSetup settings = jQuery.extend(settings, jQuery.extend({}, jQuery.ajaxSettings, settings)); var port = settings.port; switch (settings.mode) { case "abort": if (pendingRequests[port]) { pendingRequests[port].abort(); } return pendingRequests[port] = ajax.apply(this, arguments); case "queue": var _old = settings.complete; settings.complete = function() { if (_old) { _old.apply(this, arguments); } if (jQuery([ajax]).queue("ajax" + port).length > 0) { jQuery([ajax]).dequeue("ajax" + port); } else { ajaxRunning[port] = false; } }; jQuery([ajax]).queue("ajax" + port, function() { ajax(settings); }); if (jQuery([ajax]).queue("ajax" + port).length == 1 && !ajaxRunning[port]) { ajaxRunning[port] = true; jQuery([ajax]).dequeue("ajax" + port); } return; case "sync": var pos = synced.length; synced[pos] = { error: settings.error, success: settings.success, complete: settings.complete, done: false }; syncedData[pos] = { error: [], success: [], complete: [] }; settings.error = function() { syncedData[pos].error = arguments; }; settings.success = function() { syncedData[pos].success = arguments; }; settings.complete = function() { syncedData[pos].complete = arguments; synced[pos].done = true; if (pos == 0 || !synced[pos - 1]) for (var i = pos; i < synced.length && synced[i].done; i++) { if (synced[i].error) synced[i].error.apply(jQuery, syncedData[i].error); if (synced[i].success) synced[i].success.apply(jQuery, syncedData[i].success); if (synced[i].complete) synced[i].complete.apply(jQuery, syncedData[i].complete); synced[i] = null; syncedData[i] = null; } }; } return ajax.apply(this, arguments); }; })(jQuery);
以上代码加入了1个mode变量,有3个值”abort”(中止),”queue”(队列),”sync”同步。
对于需求二,我们用这个封装好的ajax改写并改进下,js代码部分如下:
$(function(){ $("body").queue([]); $("#dtitle").click(function(){ $.ajax({ url: "test.php?t=" + new Date().getMilliseconds(), success: function(html){ jQuery("ul").append(html); }, //用abort而不用queue,是因为需求是需要最后一个ajax request,而之前的ajax request //其实并没有用,那何必要等它们执行完呢?中途就可以把它中止掉 mode: "abort" }); }); });
看到这里,相信你已经完全了解ajax队列了。就算不了解,你也可以直接用封装好的那段js代码,直接用mode: “abort”
就可以了。
发表评论
-
TimeDifference.js获取时间差插件
2016-06-06 16:46 1175http://www.oschina.net/p/timedi ... -
日期时间插件Date-Utils
2016-05-28 23:16 1348原文 https://segmentfault.com/a/1 ... -
Riot v2.4.1 发布,JavaScript 的 MVP 框架
2016-05-23 13:14 981http://www.oschina.net/news/736 ... -
个最实用的JavaScript开发工具
2016-05-21 10:22 857http://my.oschina.net/u/2421687 ... -
zepto tap “点透”的解决
2016-05-20 15:44 1042http://my.oschina.net/u/2497925 ... -
Date.js
2016-04-20 17:09 1000原文 http://my.oschina.net/hnqing ... -
你真的了解图片的预加载吗
2016-04-14 10:26 1131http://my.oschina.net/HerrySun/ ... -
JavaScript之立即执行函数
2016-03-30 11:42 1241http://blog.csdn.net/qq83841923 ... -
JavaScript迭代
2016-03-27 01:44 755http://my.oschina.net/u/2346786 ... -
zepto(移动简化版jQuery),的 API 分类
2016-03-24 09:22 1739http://my.oschina.net/leejun200 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 1019[HTML5]Notification桌面提醒功能 http: ... -
js中浮点型运算
2015-12-14 11:12 1331http://www.cnblogs.com/wangkong ... -
JavaScript 文件拖拽上传插件 dropzone.js 介绍
2015-12-04 23:12 1842JavaScript 文件拖拽上传插件 dropzone.js ... -
jqgrid保存或者删除成功后调用自定义方法的解决方法
2015-11-19 23:53 6007参考: http://www.debugease.com/ja ... -
Java执行js脚本
2015-11-14 23:40 1037http://my.oschina.net/sniperLi/ ... -
YUI Compressor压缩JS
2015-11-06 17:12 1103过程心得记录 http://www.cnblogs.com/t ... -
如何使用js、html5在浏览器直接打开pdf文档
2015-11-03 22:32 8681http://q.cnblogs.com/q/48507/ ... -
js获取 本周,本月,本季度,本年,上月,上周,上季度,去年
2015-11-03 00:01 2952/** * 针对Ext的工具类 */ var ... -
正则表达式
2015-10-10 09:27 909http://my.oschina.net/robortly/ ... -
jquery垮页面事件传递
2015-08-25 21:18 1078http://my.oschina.net/u/157514/ ...
相关推荐
基于jquery的Ajax请求队列 用于处理优先ajax与一般ajax请求 用法 var handler = AjaxQueue.setup(), // 实例化队列对象 priority = 0; // 优先级为0是普通请求,1为高级请求。 高级请求会优先发送 // 向队列中添加...
《前端项目:jQuery与ajaxQueue深度解析》 在前端开发中,jQuery库以其简洁的API和强大的功能,一直是开发者们的首选工具之一。本项目“前端项目-jquery-ajaxQueue”聚焦于一个特定的jQuery插件——ajaxQueue,它为...
jquery plugin for ajax queue,jQuery Ajax队列扩展。 ####参数说明 $.ajaxQueuer([ajax队列], {配置}); 配置项(具有优先级): type String 请求方式,默认为GET async Boolean 是否为异步,默认为false,即...
然而,在某些场景下,我们可能需要控制Ajax请求的顺序,确保一个请求在另一个请求完全处理后才能执行,这就是所谓的Ajax队列(Ajax Queue)。`gnarf-jquery-ajaxQueue`是一个专门为了解决这个问题而设计的jQuery插件...
jQuery ajaxQueue ajaxQueue是一个概念证明jQuery对象,用于使用jQuery的内置排队系统来排队ajax请求。 它既简单又轻巧,并且不够健壮,但是应该为您提供有效地滥用jQuery的队列系统以适合您的项目所需的起点;) ...
在本项目中,结合了 `jquery.plupload.queue` 插件,使得文件上传变得更加用户友好,可以实现文件的批量上传功能。 批量上传是指用户可以选择多个文件,一次性提交到服务器进行处理。`jquery.plupload.queue` 插件...
本主题将深入探讨jQuery中的AJAX扩展,特别是关于自动放弃(Abandonment)和队列(Queue)的实现,这些特性对于优化异步请求管理和资源利用率至关重要。 **一、jQuery AJAX 基础** 在jQuery中,`$.ajax()`函数是...
5. 异步队列:通过jQuery的`.queue()`方法管理多个Ajax请求,避免同时发起大量请求导致服务器压力过大。 总结,这个"ajax (部分案例使用jquery)实例集锦"提供了丰富的Ajax和jQuery结合的实践应用,帮助开发者深入...
无论是查看队列内容、添加或修改队列中的函数,还是与dequeue()方法联合使用,queue()方法都能为开发者提供灵活而强大的控制方式,以实现更加流畅和动态的用户界面交互效果。在实际开发中,合理利用queue()方法,...
标题和描述中提到的知识点主要包括了jQuery的queue()和dequeue()方法,以及如何利用这两个方法来管理需要按顺序执行的函数数组,例如动画效果、AJAX请求和定时器函数。队列是一种先进先出(FIFO)的数据结构,在...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
`$.queue()`和`$.dequeue()`则可以管理动画队列,确保动画按顺序执行。 6. **数据属性**:为了保存状态(如当前显示的图片索引),可以使用jQuery的数据属性,如`$(element).data('current', index)`和`var current...
在JavaScript和jQuery的世界中,AjaxQueue是一个非常有用的工具,它允许我们按照特定顺序发送异步AJAX请求,确保它们的执行顺序。在标题提到的改进中,主要关注了三个方面: 1. **支持complete回调作为函数数组**:...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
同时,jQuery的动画队列管理(`.queue()`和`.dequeue()`)可以确保动画按照预定顺序执行。 ```javascript function rotateImages() { // 获取图片数组,假设是['image1', 'image2', ...] var images = ['image1...
总结起来,"Jquery实现用户信息异步验证源码.zip"包含的源代码很可能是关于如何使用jQuery和Ajax进行实时用户信息验证的示例。它演示了如何在用户输入时监听事件,如何构造Ajax请求,以及如何处理服务器的响应,从而...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
这时可以使用jQuery的`.queue()`方法控制动画队列,或者`.promise()`方法等待动画完成后再进行下一步操作。 此外,`JQuerySiderManger`可能是一个预封装的jQuery插件,专门用于处理侧边栏的滑动效果。使用这样的...
5. 队列Queue:用于管理事件处理和动画队列。这展示了jQuery如何使用队列来控制函数的执行顺序和时机。 6. 属性操作:涉及jQuery对DOM属性和样式进行读取和设置的方法,例如 attr(), removeAttr(), css() 等。 7. ...
**ActiveMQServlet+jQuery 实现...通过这个案例,你可以了解到如何将消息队列技术与前端页面相结合,实现一个简单但实用的信息推送系统。在实际应用中,这样的系统可以扩展为复杂的实时通信平台,服务于各种业务需求。