位置: 编程技术 - 正文

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)

  • 北京增值税发票查验平台
  • 财务软件怎么样从捷软系统导出数据
  • 利润分配未分配利润借贷方表示什么
  • 小规模纳税人技术维护费可以抵扣吗
  • 财务单子包括哪些
  • 一般纳税人增值税优惠政策
  • 还有预算外资金的说法吗
  • 出纳如何做好保密工作
  • 租赁行业的增值税税率
  • 公司配股后,会迅速提高公司股票市价
  • 产权转移书据印花税计入什么科目
  • 去年的定额的发票可以报销吗?
  • 入账发票是什么意思
  • 进项发票可以不入账吗
  • 企业预算报表如何做
  • 固定资产处置流程
  • 不抵扣的发票是什么发票
  • Linux系统复制粘贴
  • 政府补助具有哪些特点?
  • 收到别的公司对公转账往来
  • 判断技巧
  • win8.1技巧
  • mac更新内容
  • 使用与保养
  • php数组函数输出《咏雪》里有多少"片"字
  • 职工住院的护理费标准
  • vue3使用vueup/vue-quill富文本、并限制输入字数
  • vue3性能对比
  • 北极熊睡觉图片卡通
  • 金融机构借款利率最新规定
  • 施工企业会计核算特点有哪些
  • php正则函数内容匹配
  • vue3.0优点
  • win11系统中怎样调整office底色
  • phpgd库怎么开
  • php无限分类实现不实用递归
  • 应该如何打造自己
  • 兼职人员的工资怎么做账
  • 销售物流
  • 企业申请进出口权经营范围
  • 政府补助的相关法律法规
  • 小企业会计准则和一般企业会计准则的区别
  • 视同销售的情况是?
  • 房屋租赁物业费谁承担
  • 垃圾清运费属于什么服务
  • 小规模免征增值税的会计处理办法
  • 失控发票补交上年所得税
  • 一般纳税人采购分录
  • 100%直接控制的母子公司之间,母公司向子公司
  • 产成品入库的单据是什么
  • 发票已开的情况下不确认收入可以吗?
  • 销售的差额如何分录
  • 车辆转让怎么开票
  • 营业收入和主营业务收入分别在哪看
  • centos更改文件所有者和组
  • 删除windows.old文件夹后 桌面没有了
  • win 10文件
  • 重装win7系统后屏幕变小了
  • iis的安全性设置主要包括
  • 在linux系统中有一个重要的概念
  • Android 让EditText失去焦点避免自动弹出输入法
  • 批处理命令在哪个菜单中
  • 如何使用蓝牙耳机
  • shell脚本实现同时多台远程主机执行命令的代码分享
  • ip地址编址方法
  • linux bzip2压缩目录
  • nodejs的流处理模块
  • js selectionchange
  • jquery-easyui-1.3.3
  • python理论基础
  • python基于django的项目
  • 解决烧心最快方法
  • 江西国税局电子税务局
  • 志愿者开展活动后存在的问题
  • 如何查询公司的电话号码
  • 供热用地规划指标
  • 请问农村自建房彩钢瓦下面修房吊什么顶好
  • 湖北注册税务师协会
  • 非税控发票是什么
  • 农夫山泉水质量合格吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设