位置: 编程技术 - 正文

jquery延迟对象解析(jquery 延迟对象)

编辑:rootadmin

推荐整理分享jquery延迟对象解析(jquery 延迟对象),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery延迟加载的方式,jquery延迟加载的方式,jquery延迟加载的方式,jquery延迟执行一个函数,jquery延时器,jquery延迟执行一个函数,jquery延迟加载的方式,jquery延迟执行一个函数,内容如对您有帮助,希望把文章链接给更多的朋友!

技术一般水平有限,有什么错的地方,望大家指正。

  ES6已经实现了延迟对象Promise,但是今天主角是JQ里面的延迟对象,套路其实都是差不多的。下面先看一个比较牵强的例子:

  现在先聚焦功能,我们点击add按钮可以看到span元素添加并且颜色变红。然后在看我们代码中的的异类的东西,开始的var dfd = new $.Deferred();以及add事件函数中的dfd.resolve();还有就是最后面的dfd.done(function(){$("span").css("color","red");})。

  $.Deferred()就是我们今天介绍的重点---JQ中的延迟对象,所谓延迟就是在以后的某段事件可以运行。我们看上面的代码的一个处理流程,在上面的代码中我们调用新建的延迟对象的dfd.done()方法的参数位置传递了一个匿名函数表达式,在点击事件的处理函数执行时调用dfd.resolve(),之后我们写在dfd.done()里面的匿名函数就执行了,在这个过程中我们可以看做,dfd把done里面的函数放在resolve的位置了。dfd就是延迟对象,很明显它可以改变函数的执行顺序。

  在看上面的这段代码你仔细一想就会发现有个毛用啊,我们把改变颜色的代码放在一个函数里面,点击的时候调用这个函数不就好了,写这么麻烦有个鸟用。其实延迟对象最多的是应用在AJAX中。上面的代码我们点击add之后我们在点击remove然后在点击add这时候发现这次的字没有变成红色,这是因为延迟对象的状态变化之后就失效了,说白了就是一次性的。

延迟对象使用

  JQ为我们实现了延迟对象的功能,我们一般称为Deferred或者Promise,基本上是一个东西,确切的说Promise是从Deferred中派生的一个子类。

  我们在使用的时候首先就是创建一个延迟对象:var dfd = new $.Deferred()。

  延迟对象dfd有三种状态分别为pending,resolved,rejected,我们可以通过对dfd对象使用state方法来查看此时的状态:dfd.state()。

  dfd在创建出来之后他的状态为pending,调用resolve方法之后:dfd.resolve()它的状态就会变为resolved然后会执行dfd.done()里面的函数,dfd调用reject方法之后:dfd.reject()它的状体就会变为rejected然后会执行dfd.fail()里面的方法,并且dfd对象在从pending变为resolved或者rejected之后就不会再发生任何变化,这也就是我们上面的代码为什么只能在第一次点击之后的文字是红的的原因。

  我们在来看一看开始的代码,我们的dfd.done()中定义了字体变红的函数,在点击函数执行后dfd调用resolve,之后dfd的状态从pending变为resolved会执行done里面的方法继而颜色变红。

  dfd.resolve()和dfd.done()之间是可以进行参数传递的,现在我们对开始的代码做一些修改:

  我们在点击之后字体颜色变为绿色了。

jquery延迟对象解析(jquery 延迟对象)

  另外dfd还有另外一个函数always:dfd.always(),dfd的状态从pending变为哪个状态always里面的函数都会执行。

  dfd的每一个方法都会返回一个延迟对象,所以done,fail,always都是可以有多个的,可以直接写成链式调用:

dfd.done(function(){}).done(function(){}).fail(function(){});

  dfd的无论哪个API都可以写多个,这时候我们就可能会考虑它的执行顺序能不能保证。这点我们完全可以放心,dfd的函数执行的顺序是完全没有问题的按照我们书写的顺序执行,看下面的代码:

  第一个函数添加元素,第二个函数改变添加元素的颜色。

  无论什么时候dfd三个API里面的函数都会在dfd的状态从pending变化之后才能执行,在异步的情况下如此,在同步的情况下也是。更确切的说dfd在调用dfd.resolve()之后已经执行过的done的里面的函数会立即执行,对于dfd.resolve()后面的done来说当程序走到它那时才会执行:

延迟对象示例

  最开始我们使用JQ的AJAX的时候我们通常的写法是:

  在1.5(好像是这个版本~)之后AJAX会返回一个Promise对象,继而我们可以写成下面这种:

  看起来更骚气了一点,而且这我们还可以在加多个.done(function(){}),每个done处理不同的事情这样看起来比较清晰。

  已经知道延迟对象可以改变代码的执行顺序,假如我们又下面的代码:

  我们会发现嵌套的有点多了,我们就可以利用延迟对象让他看起来更加好看一点:

  没有延迟对象我们一样能完成需要的功能,此时我们就需要一层一层嵌套我们处理过程了,而有了延迟对象我们就可以避免这种事了,他可以轻松控制代码的执行顺序,让代码看起来更请清晰。你可能会说我封装函数在合适的地方调不就行了,如果自己看自己写的代码没问题,但是换一个人他的滚动条可能就一直上上下下了。

  延迟对象的里一个作用就是可以合并AJAX的调用,比如一个接口取数据A另一个接口取数据B,AB都取到之后我们在利用这些数据做一些喜欢做的事,我们就可以利用延迟对象轻松实现。此时我们就可以利用JQ的$.when()来实现。$.when()就跟他的名字一样-当什么的时候-,他的参数可以是Promise对象,也可以是字符串(很少遇到不在介绍),他的返回结果也是一个Promise对象,下面看一个小例子:

  allData是保存所有数据的一个集合,dataA是第一个AJAX返回的Promise对象,dataB是第二个。$.when()的done方法执行的唯一条件就是dataA和dataB都执行成功。

  补充:dfd还有一对组合就是notify+progress当dfd对象的状态处于pending时可以调用dfd.nothfy(),调用之后dfd.progress()里面的函数会执行,只要dfd处于pending状态dfd.notify()就可以一直调用,同样也可以传递参数。

jquery移除了live()、die(),新版事件绑定on()、off()的方法 我蛋疼了快分钟,怎么调用都是报错,最后一查,原来jquery已经移除了live()和die()方法。使用了新的事件绑定方法on()、解除绑定方法off().新的绑定方法

浅谈jquery之on()绑定事件和off()解除绑定事件 off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。off()函数主要用于解除由on()函数绑定的事件处理函数。该函数属于jQuery对象(实例)。语

jQuery的ready方法实现原理分析 jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用标准W3C浏览器DOM隐藏api和IE浏览器缺陷

标签: jquery 延迟对象

本文链接地址:https://www.jiuchutong.com/biancheng/379364.html 转载请保留说明!

上一篇:关于Jquery中的bind(),on()绑定事件方式总结(关于jQuery中的DOM操作,下列哪种方法用来复制元素?)

下一篇:jquery移除了live()、die(),新版事件绑定on()、off()的方法(jquery移出class)

  • 税控抵减会计分录
  • 财务软件属于无形资产的哪一种
  • 单位支付给职工的一次性补助金怎么入账
  • 公司销售家电并购案例
  • 土地增值税多交了怎么处理
  • 土地增值税清算规程实施细则
  • 股息红利需要企业交税吗
  • 创业就业带动补贴
  • 入库出库模板
  • 结余资金财政收回如何做账
  • 财税2010121号文件解读
  • 全国失信人员信息
  • 电商企业如何确定产品结构
  • 代扣代缴境外增值税可以抵扣
  • 全年一次性奖金税率表
  • 金蝶固定资产减少怎么做
  • 2023个人出租房屋房产税
  • 房租押金未全额缴纳
  • isahelp是什么进程
  • 通过session实现用户的登录与登出功能
  • 对于小型微利企业的建议
  • zendstudio写好程序怎样运行
  • 中小企业应交税费
  • vuejs性能
  • img标签铺满div
  • yii2组件的理解
  • 蓝色向日葵
  • Yii CFileCache 获取不到值的原因分析
  • uniapp开发常用案例
  • usermod修改密码
  • ps橡皮擦怎么擦的跟背景色一样
  • 专项应付款二级明细科目有哪些
  • php如何解析json串内的数组
  • 什么是企业年报 汇算 加计
  • 返利开红字发票怎么做账
  • 增值税进项税额在借方还是贷方
  • 销售使用过的车辆应该如何交增值税
  • 销售车位应怎么交税
  • 餐饮个体户如何申请开票
  • 完税证明可以直接做账吗
  • 跨月的凭证出错如何处理
  • 住房补贴需要交个税吗
  • 限定性净资产包括哪三个方面
  • 城建税减半从什么时候开始
  • 初级会计实务中第二章第四节存货(5)费琪
  • 租赁业发票
  • 坏账准备的计提分录
  • 农产品收购发票如何抵扣进项税
  • 什么情况下交劳务税
  • 什么是中型企业
  • 计入税金及附加借方的内容
  • 事业单位的非税收入账务处理
  • 分公司可以设立公司吗
  • 明细分类账怎么打印
  • sql server怎么添加数据
  • java连接sqlserver数据库对象名无效
  • mysql替换命令
  • sqlserver 统计sql语句大全收藏
  • windows server 2008 R2
  • mac升级最新系统会卡么
  • windows xp设置屏保密码
  • windows环境是什么意思
  • Win10 Mobile 10572快速配置更新推送 Win10 Mobile 10572升级体验
  • 苹果官网
  • linux svn管理工具
  • nkvmon.exe - nkvmon是什么进程 有什么用
  • 怎样查看windows10版本
  • cocos2dx怎么打开
  • unity shader lerp
  • cocos游戏开发教程
  • 猫的所有视频
  • js中的date函数
  • Python编程中的逻辑与控制
  • javascript入门书
  • Easyui 之 Treegrid 笔记
  • CA证书如何办理?
  • 求资金占用利息的公式
  • 小型贸易公司怎么赚钱
  • 吸收合并是什么意思
  • 契税计算器在线计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设