1. JavaScript 基础

  2. 函数进阶

  3. 深入数据和类型

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 错误处理

  10. 异步编程

  11. 网络请求

  12. 模块

  13. 练习

  14. 实例

  15. 工具与规范

异步

在 JavaScript 中很多执行不是立刻进行的,比如读取个文件、加载网络URL、DOM操作等等,执行这些不是立刻执行,且稍后才能得到结果的就是 异步执行。与之相对的,立刻执行并能得到结果的就是同步执行

$$tip

你可以发现,异步执行的函数基本都是耗时长的函数,比如读取文件或加载网络 URL。设想一下,如果这些是同步执行,那么将会阻塞我们 JavaScript 进程, 那么之后的代码都得等待执行完成,会造成页面卡死。

$$

常用的 setTimeout 也是典型的异步函数:

function doAfter3s(func) {
    // 三秒后执行的函数
    setTimeout(func, 3000)
}

alert("开始执行") // 同步执行

doAfter3s(() => alert("大家好")) // 异步执行

alert("结束执行") // 同步执行

回调

使用异步执行就有个问题了,我们不知道执行有没有完成,有没有成功,执行结果也不得而知。

$$jsdemo$$
$$edit$$
function sum(x, y) {
    return x + y
}

function doAfter3s(func) {
    // 三秒后执行的函数
    setTimeout(func, 3000)
}

// 同步执行能直接得到执行结果
let result = sum(3, 4)
alert(result)

doAfter3s(() => sum(5, 6)) // 无法得到执行结果

alert("结束执行") // 同步执行

为了解决这个问题,我们想出了一种方法。传递一个函数,使得调用方在函数执行结束时调用,并传递执行结果。这种方式就被称为回调,而执行结束时调用的函数就被称为回调函数。

$$jsdemo$$
$$edit$$
function sum(x, y) {
    return x + y
}

function doAfter3s(func, cb) {
    // 三秒后执行的函数
    setTimeout(() => {
        // 接收执行结果
        // 并传递给回调函数
        let result = func()
        cb(result)
    }, 3000)
}

function callback(result) {
    // 定义的回调函数
    alert("任务执行完成")
    alert("执行结果:" + result)
}

doAfter3s(() => sum(5, 6), callback) // 同时传递回调函数

alert("结束执行") // 同步执行