关于javascript:JavaScript-异步操作之回调函数

5次阅读

共计 2382 个字符，预计需要花费 6 分钟才能阅读完成。

本文试图尝试站在初学 异步 编程的角度来解释什么是 回调函数。

在介绍 回调函数 之前，先来看两个概念 同步 和 异步。

同步 行为通常指代码从上到下一行一行的程序执行，前面的代码总是在后面的代码执行实现当前才会执行。

同步 操作的例子如下：

let a, b;
function foo() {a = 1;}
foo();
b = a + 1;
console.log(b); //2

因为代码程序执行，先调用函数 foo();，后执行 b = a + 1;，所以在执行 b = a + 1; 时，a 的值肯定曾经被确定为 1 了，能够立刻应用，变量 b 最终后果为 2。

异步 行为则指代码并非依照程序执行，前面的代码不肯定总是在后面的代码执行实现当前才会执行。

异步 操作的例子如下：

let a, b;
function foo() {a = 1;}
setTimeout(foo, 1000); //1 秒当前再调用 foo()
b = a + 1;
console.log(b); //NaN

这里没有显式的调用 foo()，而是将函数名 foo 传递给 setTimeout，JavaScript 运行时在 1 秒当前会主动调用 foo()。

首先代码仍然程序执行，当执行到 setTimeout(foo, 1000); 时，JavaScript 主线程发现这是一个将要异步执行的工作，就会将 foo() 放入 工作队列 而后继续执行上面的同步代码 b = a + 1;，当 b = a + 1; 执行结束，所有同步代码都被执行实现，此时 JavaScript 主线程再去 工作队列 中取出须要执行的工作来执行，也就是 1 秒后执行 foo()。

因为 b = a + 1; 先于 foo() 执行，所以这段异步操作执行后，变量 b 最终后果为 NaN。

介绍了 同步 和 异步 的概念，咱们再来看下何为 回调函数。

在 异步 操作示例中，setTimeout(foo, 1000); 这句代码中的 foo 就能够被称作 回调函数 。所谓 回调函数 ，就是被主线程放入到 工作队列 中的代码，这段代码通常以函数为单位，并且等到所有 同步 代码执行实现当前才会被执行。

所以下面的 异步 操作示例程序如果想得到与 同步 操作一样的后果，就得改成这样：

let a, b;
function foo() {
    a = 1;
    b = a + 1;
    console.log(b); //2
}
setTimeout(foo, 1000); //1 秒当前再调用 foo()

因为计算 b 的值时依赖 a 的值，而 a = 1; 是在 回调函数 中执行的，也就是说所有 同步 代码执行实现当前才会执行 回调函数 中的 异步 代码，所以 b = a + 1; 也要挪动到 回调函数 中。 回调函数 中的代码也是程序执行的，所以 b = a + 1; 语句要放在 a = 1; 语句之后。这样就能使变量 b 最终后果为 2。

在 JavaScript 编程中，AJAX 操作能够说是十分常见的 异步 操作场景了。如果你不理解 AJAX 的概念，那么我强烈建议你学习一下。

以下是一个应用 jQuery 发送 AJAX 申请的示例：

function handleSuccess(res) {console.log(res);
}

function handleError(xhr) {console.log(xhr.status);
}

$.ajax({
    type: 'GET',
    url: 'http://localhost:3000/',
    success: handleSuccess,
    error: handleError
});

其中 success 注册申请胜利的 回调函数 handleSuccess，error 注册申请失败的 回调函数 handleError。

当 AJAX 申请胜利并失去响应，JavaScript 运行时会主动调用 handleSuccess，申请失败则主动调用 handleError。

这里应用 回调函数 的目标，就是为了 异步 解决申请后果。因为发送 AJAX 申请是一个比拟耗时的操作，如果 同步 解决，则会大大降低 JavaScript 运行效率。当 AJAX 申请收回当前，咱们并不知道何时取得响应，所以采纳 异步 编程的形式，将解决响应的代码注册为 回调函数。

能够发现，回调函数 和 异步 密不可分， 回调函数 的概念只会呈现在 异步 编程中， 同步 编程是没有必要存在 回调函数 的。

文中对 JavaScript 异步 执行机制形容并不精确，要想了解 JavaScript 异步 执行机制则必须要学习 Event Loop。本文并不想引入太多简单的概念，只想让初学 异步 编程的人可能疾速了解什么是 回调函数。

如果你是一个 JavaScript 开发者，那么本文到此就完结了。如果你凑巧也是一个 Python 开发者，你还能够持续看上来。

对于写过 Python 爬虫的人来说，肯定据说过 Scrapy 这个十分有名的爬虫框架，你可能在 Scrapy 我的项目的 spider 文件中见到过如下相似的代码：

class DoubanSpider(scrapy.Spider):
    name = 'douban'
    allowed_domains = ['movie.douban.com']

    def start_requests(self):
        for i in range(0, 10):
            url = f'https://movie.douban.com/top250?start={i * 25}'
            yield scrapy.Request(url=url, callback=self.parse)

其中 callback=self.parse 就是将 self.parse 注册为 回调函数 。因为 Scrapy 是一个 异步 爬虫框架，当 scrapy.Request 发出请求当前，程序并不会阻塞，而当申请胜利并失去响应时，Scrapy 会主动调用咱们注册的 回调函数 self.parse，这与 jQuery 的 AJAX 一模一样。

在用 Python 编程时，大部分工夫都在写 同步 代码，所以很多初学者在首次接触 异步 编程时会感到不适应。当你在学习一门编程语言中陷入困惑，兴许能够在其余编程语言中找到灵感。