javascript语言的执行环境是单线程(single thread),就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。
这种模式的好处是实现起来比较简单,执行环境相对单纯;但是只要耗时比较多,假如有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。
Javascript处理异步的方法有以下几种:
回调是一个函数被作为一个参数传递到另一个函数里,在那个函数执行完后再执行。回调函数是异步编程最基本的方法,其优点是简单、容易理解和部署;缺点是容易产生回调地狱。
ajax('XXX1', () => {
// callback 函数体
ajax('XXX2', () => {
// callback 函数体
ajax('XXX3', () => {
// callback 函数体
})
})
})
这就是所谓的回调地狱,回调地狱带来的负面作用有以下几点:
这种方式,异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
1.普通方式
f1.on('done', f2);
上面这行代码的意思是,当f1发生done事件,就执行f2。
2.onclick方法
element.onclick=function(){
//处理函数
}
element.onclick=handler1;
element.onclick=handler2;
element.onclick=handler3;
// 只有handler3会被添加执行
3.addEvenListener
elment.addEvenListener("click",handler1,false);
elment.addEvenListener("click",handler2,false);
elment.addEvenListener("click",handler3,false);
该方法的第三个参数是一个布尔值:当为false时表示由里向外,true表示由外向里。
我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern)
首先,f2向信号中心jquery订阅done信号。
jQuery.subscribe('done', f2);
然后,f1进行如下改写:
function f1() {
setTimeout(function () {
jQuery.publish('done');
}, 1000);
}
f1执行完成后,向信号中心jQuery发布done信号,从而引发f2的执行。f2完成执行后,可以取消订阅(unsubscribe)
jQuery.unsubscribe('done', f2);
这种方式的优点:可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
以上都是ES6之前的异步处理方式。ES6之后出现了promise。它是异步编程的一种解决方案,比传统的解决方案(回调函数)——更合理和更强大。
Promise 对象有以下两个特点。
1.对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
2.一旦状态改变,就不会再变,任何时候都可以得到这个结果
1.ES6 规定,Promise 对象是一个构造函数,用来生成 Promise 实例。
const promise = new Promise((resolve, reject) => {
if (/* 异步操作成功 */){
resolve(success)
} else {
reject(error)
}
})
Promise接收一个函数作为参数,函数里有resolve和reject两个参数:
2.Promise 实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then((success) => {
// 对应于上面的resolve(success)方法
}, (error) => {
// 对应于上面的reject(error)方法
}
// 还可以写成这样 (推荐使用这种写法)
promise.then((success) => {
// 对应于上面的resolve(success)方法
}).catch((error) => {
// 对应于上面的reject(error)方法
})
then(onfulfilled,onrejected)方法中有两个参数,两个参数都是函数:
3.promise构造函数是同步执行的,then方法是异步执行的
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(() => {
console.log(3)
})
console.log(4)
// 1 2 4 3
Promise.finally()用于指定不管 Promise 对象最后状态如何,都会执行的操作。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
Promise.all()用于处理多个异步处理,比如说一个页面上需要等多个 ajax 的数据回来才执行相关逻辑。
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定,分成两种情况。
Promse.race()就是赛跑的意思,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
const p = Promise.race([p1, p2, p3])
上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
async/await是JavaScript为了解决异步问题而提出的一种解决方案,许多人将其称为异步的终极解决方案。async 函数,就是 Generator 函数的语法糖。
相较于 Generator,Async 函数的改进在于下面四点:
1.凡是在前面添加了async的函数在执行后都会自动返回一个Promise对象
async function test() {
}
let result = test()
console.log(result) //即便代码里test函数什么都没返回,我们依然打出了Promise对象
2.await必须在async函数里使用,不能单独使用
function test() {
let result = await Promise.resolve('success')
console.log(result)
}
test() //执行以后会报错
javascript中alert是Bom中的成员函数,alert对话框是模态的,具有阻塞性质的,不点击是不会执行后续代码的。js的阻塞是指在调用结果返回之前,当前线程会被挂起, 只有在得到结果之后才会继续执行。
如何优化async代码?更好的编写async函数:使用return Promise.reject()在async函数中抛出异常,让相互之间没有依赖关系的异步函数同时执行,不要在循环的回调中/for、while循环中使用await,用map来代替它
Javascript语言的执行环境是单线程,异步模式非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。
js异步加载又被称为非阻塞加载,浏览器在下载JS的同时,还会进行后续页面处理。那么如何实现js异步加载呢?下面整理了多种实现方案供大家参考。异步加载js方案:Script Dom Element、onload时的异步加载、$(document).ready()、async属性、defer属性、es6模块type=module属性
回调函数方式:将异步方法如readFile封装到一个自定义函数中,通过将异步方法得到的结果传给自定义方法的回调函数参数。事件驱动方式:使用node events模块,利用其EventEmitter对象
JavaScript引擎是基于单线程 (Single-threaded) 事件循环的概念构建的,同一时刻只允许一个代码块在执行,所以需要跟踪即将运行的代码,那些代码被放在一个任务队列 (job queue) 中
传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:ES6的新语法Promise;ES2017引入的async函数;Generator函数(略)
JS本身是一门单线程的语言,所以在执行一些需要等待的任务(eg.等待服务器响应,等待用户输入等)时就会阻塞其他代码。如果在浏览器中JS线程阻塞了,浏览器可能会失去响应,从而造成不好的用户体验。
请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。
将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!