浅析JavaScript异步代码优化 - CSDN文库

Javascript异步代码优化

异步代码优化

62 浏览量更新于2023-05-29 评论收藏 87KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

浅析浅析JavaScript异步代码优化异步代码优化

主要介绍了JavaScript异步代码优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参

考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

在实际编码中，我们经常会遇到Javascript代码异步执行的场景，比如ajax的调用、定时器的使用等，在这样的场景下也经常

会出现这样那样匪夷所思的bug或者糟糕的代码片段，那么处理好你的Javascript异步代码成为了异步编程至关重要的前提。

下面我们从问题出发，一步步完善你的异步代码。

异步问题异步问题

1. 回调地狱回调地狱

首先，我们来看下异步编程中最常见的一种问题，便是回调地狱。它的出现是由于异步代码执行时间的不确定性及代码间的依

赖关系引发的，比如：

// 一个动画结束后，执行下一个动画，下一个动画结束后再执行下一个动画

$('#box').animate({width: '100px'}, 1000, function(){

$('#box').animate({height: '100px'}, 1000, function(){

$('#box').animate({left: 100}, 1000);

});

});

由于我们不知道第一个动画什么时候开始或者什么时候结束，所以我们把第二个动画的执行内容放到了第一个动画的结束事件

里，把第三个动画放到了第二个动画的结束事件里，这时候如果有很多这样的动画，那么就会形成回调地狱。

2. 捕获异常捕获异常

除了回调地狱，如果我们需要在异步代码中捕获异常也比较麻烦，可能需要手动配置捕获方法:

try {

throw new Error('fail');

} catch (e) {

console.log(e);

}

这样的代码书写明显不是我们想要的，不仅不利于维护，而且也在一定程度上违背了良好的Javascript编码规范。

解决方案解决方案

那么我们如何优雅的写好我们的异步代码呢？我主要列了以下5种常见方案：

1. callback

callback顾名思义便是回调，但并不是将回调内容放在异步方法里，而是放到外部的回调函数中，比如问题1的代码我们通过

callback可以变成这样：

$('#box').animate({width: '100px'}, 1000, autoHeight);

function autoHeight() {

$('#box').animate({height: '100px'}, 1000, autoLeft);

}

function autoLeft() {

$('#box').animate({left: 100}, 1000);

}

如此我们看似异步的代码变成了同步的写法，避免了层层嵌套的写法，看上去也流畅了很多。同时使用callback也是异步编程

最基础和核心的一种解决思路。

2. Promise

基于callback，Promise目前也被广泛运用，其是异步编程的一种解决方案，比传统的回调函数解决方案更合理和强大。相信

了解ES6的同学肯定不会陌生。

比如我们现在有这样一个场景，我们需要异步加载一张图片，在图片加载成功后做一些操作，这里我不想用回调函数或者将逻

辑写在图片的成功事件里，那么用Promise我们可以这样写：

let p = new Promise((resolve, reject) => {

let img = new Image(); // 创建图片对象

// 图片加载成功事件

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38726712

粉丝: 2
资源: 959

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈