当前位置:Gxlcms > JavaScript > jQuery源码之异步机制的解析

jQuery源码之异步机制的解析

时间:2021-07-01 10:21:17 帮助过:3人阅读

这篇文章主要介绍了关于jQuery源码之异步机制的解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

异步机制

javascript编程往往会伴随着异步编程,比如远程获取数据,大量的异步编程会带来许多的回调函数,js是单线程的,所以完成异步往往需要借助浏览器事件驱动,这样会让我们的代码和算法变得支离破碎。jQuery就提供了一个抽象的 非阻塞 解决方案: Deferred

认识异步

  1. alert(1)
  2. setTimeout(function(){
  3. alert(2)
  4. },0)
  5. alert(3)
  6. //alert(1)
  7. //alert(3)
  8. //alert(2)

一、认识 deferred对象

开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。

deferred对象是在jquery 1.5版本被引进来的,jquery在回调方面的出处理不是很好,为此就诞生了deferred对象了。deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

二、ajax的链式操作

最开始写法是:

  1. // < 1.5
  2. $.ajax({
  3.     url: "test.html",
  4.     success: function(){
  5.       alert("哈哈,成功了!");
  6.     },
  7.     error:function(){
  8.       alert("出错啦!");
  9.     }
  10.   });

如果jquery的版本是1.5以下的,那么返回的是XHR对象,所以没法链式操作,但是高于1.5的版本的话,返回的是Deferred对象,可以进行链式操作。

  1. // >=1.5
  2. $.ajax("test.html")
  3. .done(function(){
  4. })
  5. .fail(function(){
  6. })

done()相当于success方法,fail()相当于error方法。采用链式写法以后,代码的可读性大大提高。

三、指定同一操作的多个回调函数

deferred对象的一大好处,就是它允许你自由添加多个回调函数。

还是以上面的代码为例,如果ajax操作成功后,除了原来的回调函数,我还想再运行一个回调函数,怎么办?

  1. $.ajax("test.html")
  2.   .done(function(){ alert("哈哈,成功了!");} )
  3.   .fail(function(){ alert("出错啦!"); } )
  4.   .done(function(){ alert("第二个回调函数!");} );

四、为多个操作指定回调函数

deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数,这是传统写法做不到的。那就是$.when()

  1. $.when($.ajax("test1.html"), $.ajax("test2.html"))
  2.   .done(function(){ alert("哈哈,成功了!"); })
  3.   .fail(function(){ alert("出错啦!"); });
  4. //$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

五、普通操作的回调函数接口扩展

它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法,指定回调函数。

  1. // 一个耗时操作
  2. var wait = function(){
  3. var task = function(){
  4. alert('执行了');
  5. };
  6. setTimeout(5000);
  7. }

我们为其添加回调,可能会想到$.when();

  1. $.when(wait())
  2.   .done(function(){ alert("哈哈,成功了!"); })
  3.   .fail(function(){ alert("出错啦!"); });

但是没起到效果,done立即执行,原因是$.when()接受的是一个deferred对象。所以我们进一步改进吧

  1. var dtd = $.Deferred();
  2. var wait = function(){
  3. var task = function(){
  4. alert('执行了');
  5. dtd.resolve(); // 改变deferred对象的执行状态
  6. };
  7. setTimeout(task, 5000);
  8. return dd;
  9. }

这样wait()返回的是一个defferred对象了,这就可以上链式操作了。

  1. $.when(wait())
  2.   .done(function(){ alert("哈哈,成功了!"); })
  3.   .fail(function(){ alert("出错啦!"); });

六、defferred.resolve() 和 defferred.reject()

deferred采用的是Promise的原理。这里我们要清楚一个执行状态的概念。在defferred对象中,有着三种状态,未完成 已完成 已失败

如果执行状态是"已完成"(resolved),deferred对象立刻调用done()方法指定的回调函数;
如果执行状态是"已失败",调用fail()方法指定的回调函数;
如果执行状态是"未完成",则继续等待,或者调用progress()方法指定的回调函数(jQuery1.7版本添加)。

defferred.resolve()是将状态从未完成变为已完成。 ==> done()
defferred.reject()是将状态从未完成变为了已失败。 ==> fail()

  1. var dtd = $.Deferred(); // 新建一个Deferred对象
  2. var wait = function(){
  3.     var tasks = function(){
  4.       alert("执行完毕!");
  5.       dtd.resolve(); // 改变Deferred对象的执行状态
  6.     };
  7.     setTimeout(tasks,5000);
  8.     return dtd; // 返回promise对象
  9.   };
  10.   $.when(wait())
  11.   .done(function(){ alert("哈哈,成功了!"); })
  12.   .fail(function(){ alert("出错啦!"); });
  13.   dtd.resolve();// 这里会立即先执行一次

七、defferred.promise();

上面的方法是存在一些问题的,比如dtd是一个全局变量,他可以在外部被随时该边状态,这样就会使得done()或者fail()执行不只有一次。

这显然不是我们想要的,所以我们就需要defferred.promise的帮忙了。

它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。
  1. var wait = function(dtd){
  2.     var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
  3.     var tasks = function(){
  4.       alert("执行完毕!");
  5.       dtd.resolve(); // 改变Deferred对象的执行状态
  6.     };
  7.     setTimeout(tasks,5000);
  8.     return dtd.promise(); // 返回promise对象
  9.   };
  10. var dd = wait();
  11. // dd.resolve(); // 这里如果使用了的话,就会报错的哦,因为返回deferred.promise()是无法对状态修改的哦
  12.   $.when(dd)
  13.   .done(function(){ alert("哈哈,成功了!"); })
  14.   .fail(function(){ alert("出错啦!"); });

八、$.Defferred(wait)

另一种防止执行状态改变的方法是使用$.Defferred()

  1. var dtd = $.Deferred(); // 新建一个Deferred对象
  2.   var wait = function(dtd){
  3.     var tasks = function(){
  4.       alert("执行完毕!");
  5.       dtd.resolve(); // 改变Deferred对象的执行状态
  6.     };
  7.     setTimeout(tasks,5000);
  8.     return dtd;
  9.   };
  10. var ddd = wait();
  11. // dd.resolve(); //这里报错了哦
  12. $.Deferred(dd)
  13.   .done(function(){ alert("哈哈,成功了!"); })
  14.   .fail(function(){ alert("出错啦!"); });

九、defferred对象小结

  • $.Deferred() 生成一个deferred对象。

  • deferred.done() 指定操作成功时的回调函数

  • deferred.fail() 指定操作失败时的回调函数

  • deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变;接受参数时,作用为在参数对象上部署deferred接口。

  • deferred.resolve(args) 手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法。解决Deferred(延迟)对象,并根据给定的args参数调用任何完成回调函数(doneCallbacks)。

  • deferred.resolveWith() 解决Deferred(延迟)对象,并根据给定的 context和args参数调用任何完成回调函数(doneCallbacks)。

  • deferred.reject(args) 这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法。拒绝Deferred(延迟)对象,并根据给定的args参数调用任何失败回调函数(failCallbacks)。这里的args是一个对象。

  • deferred.rejectWith(context, args) 拒绝Deferred(延迟)对象,并根据给定的 context和args参数调用任何失败回调函数(failCallbacks)。这里的args是一个数组类型。

  • $.when() 为多个操作指定回调函数。除了这些方法以外,deferred对象还有二个重要方法,上面的教程中没有涉及到。Context(上下文) 作为 this对象传递给失败回调函数(failCallbacks )

  • deferred.then()

有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

  1. $.when($.ajax( "/main.php" ))
  2.   .then(successFunc, failureFunc );

如果then()有两个参数,那么第一个参数是done()方法的回调函数,第二个参数是fail()方法的回调方法。如果then()只有一个参数,那么等同于done()。

  • deferred.always() 这个方法也是用来指定回调函数的,它的作用是,不管调用的 deferred.resolve()还`是deferred.reject(),最后总是执行。

  1. $.ajax( "test.html" )
  2.   .always( function() { alert("已执行!");} );
  • deferred.state() 确定一个Deferred(延迟)对象的当前状态。

  1. "pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").

  2. "resolved": Deferred对象是在解决状态,这意味着,deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问(或在被调用的过程中)

  3. "rejected": Deferred对象是在被拒绝的状态,这意味着,deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问(或在被调用的过程中) 。

这种方法主要是用在调试,例如,在准备拒绝(reject)一个延迟对象前,判断它是否已经处于 resolved 状态。


十、使用实例

情景1:当用户按下删除弹窗的确定或取消后,把弹窗隐藏,并执行对应的操作(删除或不执行),因为我们不知道用户什么时候会点击按钮,所以不能让弹窗阻塞其他任务的执行。

  1. function pop(arg) {
  2. if (!arg) {
  3. console.error('pop title is empty');
  4. }
  5. var dfd = $.Deferred() //实例化一个延迟对象
  6. ,
  7. confirmed //记录按下确定或取消
  8. , $confirm = $content.find('button.confirm') //确认按钮
  9. ,
  10. $cancel = $content.find('button.cancel'); //取消按钮
  11. //定时器轮询,当按下确定或取消时触发删除或取消操作
  12. timer = setInterval(function() {
  13. if (confirmed !== undifined) {
  14. dfd.resolve(confirmed);
  15. clearInterval(timer);
  16. dismiss_pop();
  17. }
  18. }, 50);
  19. //点击确定时更改confirmed状态
  20. $confirm.on('click', function() {
  21. confirmed = true;
  22. });
  23. //点击取消时更改confirmed状态
  24. $cancel.on('click', function() {
  25. confirmed = false;
  26. }); //返回dfd对象
  27. return dfd.promise();
  28. }
  29. $('.delete').click(function() {
  30. var $this = $(this);
  31. var index = $this.data('index');
  32. //当前的id //确定删除
  33. pop('确定删除?').then(function(res) {
  34. res ? delete_task(index) : null;
  35. })
  36. })

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

以上就是jQuery源码之异步机制的解析的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行