jQuery的异步机制

defcon 发布于2019-08-21 10:22 / 3003人阅读

摘要：我们可以在程序的运行过程中根据检测到的状态来决定之后哪些回调函数会被执行。

异步方式的概述

通过事件达到异步操作

通过我们最熟悉的回调

类promise的方式

首先我们注意到1.5版本前后的jquery有一个重要的不同

//before 1.5
var option={
    type:"GET",
    url:"...",
    success:function(){..},
    fail:function(){..},
    complete:function(){..}
}；
$.ajax(option);
//after 1.5
$.ajax(option)
    .done(function(){..})
    .fail(function(){..})
    .progress(function(){..})
    .always(function(){..})

1.5版本之后变成了优美的链式调用，并且可以对同一事件增加多个回调函数，原因是原生的xhr对象换成了jqxhr对象，里面有什么魔法呢？

从promise讲起

promise在javascript编程世界里可以说是大名鼎鼎，下面这段代码给出了它的简单用法。

promise(function(){..}).
then([successhandler1,successhandler2,..],
     [failhandler1,failhandler2,...]);

promise为我们呈现出了异步编程的一种新模式，但它还不够漂亮，接下来我们看一看jQuery引入的deferred。

jQuery的Deferred 创建Deferred对象

var de=$.Deferred();//空的Deferred对象
$.Deferred(function(){..}).
  done(function(){..});
//会直接执行里面的function并返回一个Deferred对象
function tmp(defer){
    ....
    return defer;
};//这个写法的含义我们留在后面再讲

Deferred的机理

我们可以这样想，每个deferred对象内部有一个隐藏着的状态变量，有成功、失败、执行中三种状态，当程序执行成功则会把它设为成功，否则设为失败。这里的成功失败指的是满足某种设定条件，并非一般意义上的出错，即使抛出异常也不认为其失败。我们可以在程序的运行过程中根据检测到的状态来决定之后哪些回调函数会被执行。

设定状态实例

$(function(){
    ....
    if(..) this.resolve(arg1,arg2,..);
    //会执行done和always回调，args是传入回调的参数
    //同类函数this.resolveWith(content,[args..]);content作为回调函数中的this
    else this.reject(arg1,arg2,..);
    //执行fail和always回调，rejectWith基本同上
    //需要注意的是always也必须状态改变才能调用，若一直处于执行状态，也不会调用
    ....
    this.notify(args);//调用progress回调，但必须在状态变为成功或失败前发起，这里progress不会被调用
    //notifyWith基本同上
}).fail(..).done(..).progress(..);

还需要注意的是，即使状态发生改变了，程序还会继续运行。这里所说的成功失败指的是满足我们设定的条件与否，和程序真的运行状态无关，done、fail、always返回的依然是原本的deferred对象。

请记住无论什么回调都是在函数执行完后调用，函数执行不会被中断

最后还要注意一点未防止状态在程序外部被更改，应该加上一句
$.Deferred(function(){..}).promise().done(..).fail(..);
但promise返回的不再是原本的Deferred对象了，也不能在外部更改其状态了。

强劲的when

看到这里我们可能有一个疑问，如果我们有一系列任务来决定后来的回调怎么办，不用担心我们有when。

$.when(defer1,defer2...);
//这时候如果每个defer还要$(func(){..})就很难写了，所以就回到我们开始介绍的最后一种，利用函数返回
var defer1=$.Deferred();
var defer2=$.Deferred();
function func1(defer){...return defer;}
function func2(defer){...return defer;}
$.when(func1(defer1),func2(defer2)).done(..).fail(..);
//当全部defer成功done才会被调用，有一个defer失败fail就会调用，但无论怎样一个回调函数最多被调用一次，且不会影响所有函数的执行
var tmp=9;
$.when(tmp).done(..).fail(..);
//当when链里面全部不是defer变量时会直接执行done回调，注意是全部，有defer变量会跳过非defer，回调取决于defer

idc机房托管专线服务异步机制 JavaScript异步机制异步模块加载机制-amd jquery异步

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85422.html

异步操作（一）概述

摘要：回调函数指定了下一步操作。异步操作的流程控制参数为秒后返回结果上面代码的函数是一个异步任务，非常耗时，每次执行需要秒才能完成，然后再调用回调函数。单线程模型同步任务和异步任务任务队列和事件循环异步操作的模式回调函数事件监听发布/订阅异步操作的流程控制串行执行并行执行并行与串行的结合 1.单线程模型指的是js只在线程运行，一个时间执行一个任务，其他任务排队。事实上是一个运行脚本的主线程...

wemall 2019-08-26 10:13 评论0 收藏0
javascript异步编程详解

摘要：在服务器端，异步模式甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有请求，服务器性能会急剧下降，很快就会失去响应。第三是，捕捉不到他的错误异步编程方法回调函数这是异步编程最基本的方法。前言你可能知道，Javascript语言的执行环境是单线程（single thread）。所谓单线程，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面...

huangjinnan 2019-08-20 10:48 评论0 收藏0
JavaScript 异步机制及应用入门教程

摘要：异步与同步技术研究概念介绍异步简写同步简写用比方来比喻异步就是个人同时起跑起点和出发时间相同在起跑时不去关心其他人会啥时候跑完尼玛这不废话吗大家都才起跑怎么知道别人多就跑完同步就是个人接力跑起点和出发时间不同且后一个人会等待前一个人跑完才能 1. 异步与同步技术研究 (1). 概念介绍异步: asynchronous 简写async 同步: synchronous 简写syn...

BoYang 2019-08-21 10:34 评论0 收藏0
异步

摘要：在异步机制中，任务队列就是用来维护异步任务回调函数的队列。四对象对象是工作组提出的一种规范，目的是为异步编程提供统一接口。异步 1.JavaScript单线程的理解 Javascript语言的执行环境是单线程（single thread）。所谓单线程，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。 2.JavaScript单线...

goji 2019-08-23 13:54 评论0 收藏0
再谈JavaScript模块化

摘要：应用日益复杂，模块化已经成为一个迫切需求。异步模块加载机制。引用的资源列表太长，懒得回调函数中写一一对应的相关参数假定这里引用的资源有数十个，回调函数的参数必定非常多这就是传说中的简述缘起模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面...

MorePainMoreGain 2019-08-26 10:14 评论0 收藏0