摘要:中的对象很好的解决了这个问题。每一个对象都可以设置三种状态进行中已经正确执行执行失败关于,还有更多需要了解的地方,我这里只是抛砖引玉。的对象就是对模式的一个很好的实现案例。我们通过一个简单的例子来看看对象应该如何使用。
在实际开发中常常遇到这样的问题: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对象都还有更多值得了解知识点与用法,这是一个非常值得掌握的神兵利器,建议大家搜索更多的文章来学习它。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115298.html
摘要:中的对象很好的解决了这个问题。每一个对象都可以设置三种状态进行中已经正确执行执行失败关于,还有更多需要了解的地方,我这里只是抛砖引玉。的对象就是对模式的一个很好的实现案例。我们通过一个简单的例子来看看对象应该如何使用。 在实际开发中常常遇到这样的问题:B函数中需要用到的变量或者参数,只有等A函数执行完毕了才能获取到。比如A函数中有一个ajax请求,而B函数中所需要的position变量...
摘要:中的对象很好的解决了这个问题。每一个对象都可以设置三种状态进行中已经正确执行执行失败关于,还有更多需要了解的地方,我这里只是抛砖引玉。的对象就是对模式的一个很好的实现案例。我们通过一个简单的例子来看看对象应该如何使用。 在实际开发中常常遇到这样的问题:B函数中需要用到的变量或者参数,只有等A函数执行完毕了才能获取到。比如A函数中有一个ajax请求,而B函数中所需要的position变量...
摘要:之所以是单线程,取决于它的实际使用,例如不可能同添加一个和删除这个,所以它只能是单线程的。所以,这个新标准并没有改变单线程的本质。 原文博客地址:https://finget.github.io/2018/05/21/async/ 异步 什么是单线程,和异步有什么关系 什么是event-loop 是否用过jQuery的Deferred Promise的基本使用和原理 介绍一下asyn...
摘要:我们称为回调对象,它内部会维护一个数组,我们可以向其中添加若干个回调函数,然后在某一条件下触发执行。第一次之后,再次新的回调函数时,自动执行回调。当前面的回调函数返回时,终止后面的回调继续执行。 最近懒癌发作,说好的系列文章,写了一半,一直懒得写,今天补上一篇。 Deferred 我们在使用promise对象时,总会提到一个与它关系密切的对象——Deferred。其实Deferred没...
阅读 1982·2023-04-25 23:30
阅读 1421·2021-11-24 10:18
阅读 3037·2021-10-09 09:54
阅读 1985·2021-10-08 10:05
阅读 3367·2021-09-23 11:21
阅读 3133·2019-08-30 15:52
阅读 1533·2019-08-30 13:05
阅读 1021·2019-08-30 13:02