jquery的Deferred 对象初体验

  之前阅读了阮一峰老师的jQuery的deferred对象详解一文,结合jquery手册,算是对Deferred对象有了初步的认知。今天便来分享一下我自己的一些体会。

  一、deferred可以方便的添加回调

      先来看下面的例子

        

1 var test = function(callback) {
2     setTimeout(function() {
3       console.log(‘我完成了‘);
4       callback(‘我是回调‘)
5     }, 1000)
6 };
7 test(function(text) {
8     console.log(text)
9 });

      上面的函数test在调用时我们传入了一个回调,在test被调用1秒后回调执行。这段代码现阶段运行的很好,下面我们来用deferred对象来改写一下。

 1 var test = function(dfd) {
 2   setTimeout(function() {
 3     console.log(‘我完成了‘);
 4     dfd.resolve(‘我是回调‘);
 5   }, 1000)
 6 }
 7
 8 $.Deferred(test).done(function(text) {
 9   console.log(text)
10 })

      上面的代码运行的也很好。

      接下来如果我们希望为test函数再添加一个回调函数,那上面的2段代码需要怎么修改呢?

    第一段可以改为:(方式很多,但都需要进入test函数内进行修改)

 1    var test = function (callback, callback2) {
 2             setTimeout(function () {
 3                 console.log(‘我完成了‘);
 4                 callback(‘我是回调‘);
 5                 callback2();
 6             }, 1000)
 7         }
 8         test(function (a) {
 9             console.log(a);
10         }, function () {
11             console.log(‘我是回调2‘);
12         });

    第二段改为:(只需再次调用done方法)

  

 1        var test = function (dfd) {
 2             setTimeout(function () {
 3                 console.log(‘我完成了‘);
 4                 dfd.resolve(‘我是回调‘);
 5             }, 1000)
 6         }
 7
 8         $.Deferred(test).done(function (a) {
 9             console.log(a)
10         }).done(function () {
11             console.log(‘我是回调2‘)
12         })

    其中,我们为第一段代码中的test函数新增了一个参数,并在调用时传入第二个回调函数。第二段代码只需要再使用延迟对象的done方法即可。比较这两种方式,可以明显的发现使用deferred对象可以更加方便的管理添加回调函数。而第一段代码虽然有很多种方式来实现添加回调,但无论如何都需要进入到test函数内部进行修改,这大大增加了程序的耦合性与维护成本。

    二、deferred可以为多个操作指定回调函数

    有时候我们需要在程序中同时调用2个耗时不同的函数,这时候如果我们希望在这两个函数都执行完后再执行回调函数,应该怎么做呢?

    传统的方式实现起来就显得不够优雅了,而使用deferred对象与$.when方法可以轻松的实现。

 1      var test1 = function (dfd) {
 2             setTimeout(function () {
 3                 console.log(‘test1‘);
 4                 dfd.resolve(‘test1执行完毕‘);
 5             }, 1000)
 6         }
 7         var test2 = function (dfd) {
 8             setTimeout(function () {
 9                 console.log(‘test2‘);
10                 dfd.resolve(‘test2执行完毕‘);
11             }, 2000)
12         }
13         $.when($.Deferred(test1), $.Deferred(test2)).done(function (a, b) {
14             console.log(a);
15             console.log(b);
16             console.log(‘2个函数都执行完毕‘);
17         })

    可以看出用deferred实现起来既方便又优雅。

    以上是我对deferred对象的一些初步认知,水平有限,欢迎大家指正。

      

    

时间: 2024-10-14 10:00:09

jquery的Deferred 对象初体验的相关文章

jQuery的deferred对象

今天学习jQuery API的时候看到deferred部分,以前也没有接触使用过,看的毫无头绪,于是找资料学习了一番. deferred对象代表了将要完成的某种操作,并提供了一些方法,帮助用户使用.它是jQuery对Promises接口的实现.由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待.为了避免整个程序失去响应,通常的解决方法是将那些排在后面的操作,写成“回调函数”(callback)的形式.这样做虽然可以解决问题,但是有一些显著缺点: 回调函数往往写成函

jQuery的deferred对象详解(转)

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

jQuery的deferred对象详解(转)

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

jQuery的deferred对象详解(一)

最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面阐述deferred讲的非常清楚,也让我大彻大悟,为了以后能很好的查阅,现将阮老师的文字转载过来. 一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即

谈谈JQuery的Deferred对象

最近一个变态的项目,一个页面只含编辑器且有下载功能,大概含20个左右接口,要求数据完整显示(很多echarts图),弄个等待圈圈等它loading,启用jQuery的Deferred延迟对象,再多的接口也不怕了.(之前没有用过Deferred对象,姑且谈谈吧) $.ajax(),低于1.5.0版本的jQuery,返回的是XHR对象,高于1.5.0版本jQuery,返回的是Deferred对象. $.when(),when通常执行0个或多个异步事件的Deferred延迟对象的回调函数: 当参数为多

【转载】学习资料存档:jQuery的deferred对象详解

我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函数,大型javascript代码里都会大量运用回调函数,大量的标准回调函数写法的坏处就是使得代码的阅读性和可维护性降低,因此出现了promise模式和大量deferred库,jQuery很优秀,但是jQuery早期的版本对优雅回调写法的支持远远不够,直到jQuery1.5引入了deferred后,这

jQuery的deferred对象详解

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

转载:jQuery的deferred对象详解

一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数. 但是,在回调函数方面,jQuery的功能非常弱.为了改变这一点,jQuery开发团队就设计了deferred对象. 简单说,deferred对象就是jQuery的回调函数

jQuery之Deferred对象

Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单工厂模式. 它用来解决JS中的异步编程,它遵循 Common Promise/A 规范.实现此规范的还有 when.js 和 dojo. $.Deferred作为新特性首次出现在版本1.5中,这个版本利用Deferred又完全重写了Ajax模块. $.Deferred在jQuery代码自身四处被使用,分别是promise方法.DOM ready.Ajax模块.动画模块. 这里以版本1.8.3分析,由于1.7后$.