Jquery高级应用Deferred对象原理及使用实例


Posted in jQuery onMay 28, 2020

在实际开发中常常遇到这样的问题:B函数中需要用到的变量或者参数,只有等A函数执行完毕了才能获取到。比如A函数中有一个ajax请求,而B函数中所需要的position变量需要在A函数中ajax请求完成才能得到它的准确值。

function A() {
  $.ajax({
    url: '/api/test',
    type: 'POST',
    data: {...},
    success: function(res) {
      position = res.position;
    }
  })
}

function B() {
  $('.test').text(position);
}

JavaScript的异步模式让B函数不会等待A函数计算出了position的值才会执行,它会不等待A函数的结果而直接开始执行,这样就会造成position无法正确赋值。为了解决这个问题,我们很容易想到使用回调函数,这也是最常用的方法之一

function A(callback) {
  $.ajax({
    url: '/api/test',
    type: 'POST',
    data: {...},
    success: function(res) {
      position = res.position;
      callback && callback();
    }
  })
}

function B() {
  $('.test').text(position);
}

A函数有了回调之后,就可以将B函数当做回调函数传递给A

A(B);

可是如果这个时候,还有一个C函数,依赖于B的执行结果呢,后面甚至有可能出现一个D函数,依赖于C的结果!又如我们常用的ajax,成功了会有一个回调函数,失败了还有一个回调函数,面对这样复杂的情况,我们应该怎么样处理?虽然使用回调函数依然能够搞定这些烦人的难题,但是很显然这并不是一个好的解决办法。

jquery中的Deferred对象很好的解决了这个问题。在了解Deferred之前,我们可能需要了解一个JavaScript中的promise模式。当我们使用回调来解决实际中的问题时,很容易不知不觉中出现代码金字塔

step1(function() {
  step2(function() {
    step3(function() {
      step4(function() {
        step5();
      })
    })
  })
})

假如这个时候有一个js库实现了promise模式,那么我们的代码就会变得清晰可读,并且每一步都会等待上一步执行完毕了才会执行。

new Promise().when(promiseStep1)
.then(promiseStep2)
.then(promiseStep3)
.then(promiseStep4)
.then(promiseStep5);

每一个promise对象都可以设置三种状态:

  • pending [进行中]
  • resolve [已经正确执行]
  • reject [执行失败]

关于promise,还有更多需要了解的地方,我这里只是抛砖引玉。回到jQuery的Deferred对象来。jquery的Deferred对象就是对promise模式的一个很好的实现案例。我们通过一个简单的例子来看看Deferred对象应该如何使用。

函数first是一个耗时两秒的操作,而函数second是一个简单的函数,但是他需要在first执行完毕之后才执行。

function first() {
  setTimeout(function() {
    console.log('first');
  }, 2000);
}
function second() {
  console.log('second');
}
为了达到second在first之后执行,使用Deferred对first函数做一个简单的处理即可
function first() {
  // 1
  var defer = $.Deferred();
  setTimeout(function() {
    console.log('first');
    // 2
    defer.resolve();
  }, 2000);
  
  // 3
  return defer.promise();
}

1、在函数中声明一个Deferred对象,这样在外部就无法修改函数内部的执行状态

2、函数执行完毕,设置执行状态,如果成功执行,defer.resolve(),如果执行失败,则设置为defer.reject()

3、在函数的最后,必须将deferred对象返回出去,否则外部无法得到函数的执行结果

在做了这样的处理之后,我们就可以满足要求的正常使用了

$.when(first())
.done(second());

jquery中,ajax方法就是使用promise模式完成的,我们可以看看常规写法和Deferred对象写法的不同。

// 常规写法
 $.ajax({
   url: '/api/test',
   type: 'POST',
   data: {...},
   success: function(res) {
     // dosomething
   },
   fail: function(res) {
     // dosomething
   },
   complete: function() {
     // dosomething
   }
 })

// 新的写法
$.ajax({
   url: '/api/test',
   type: 'POST',
   ...
 })
 .done(function(res) {
   // success and do something
 })
 .fail(function(res) {
   // fail and do something
 })
 .always(function() {})

这个知识点差不多就总结完毕了。Promise模式与Deferred对象都还有更多值得了解知识点与用法,这是一个非常值得掌握的神兵利器,建议大家搜索更多的文章来学习它。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
You might like
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
总结对比php中的多种序列化
2016/08/28 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
python实现电子词典
2020/04/23 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Python global全局变量函数详解
2018/09/18 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python实现五子棋游戏
2019/06/18 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python openssl模块安装及用法
2020/12/06 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
关于读书的演讲稿500字
2014/08/27 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
电台广播稿范文
2015/08/19 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS