Promise详解(一)—-回调函数 | 青训营笔记

174 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

今天我学习了Promise,进行如下总结。在学习promise之前,应该要先弄清楚回调是什么?

我们定义的,我们没有调用,最终执行了。 (❗这一点很重要)

分类

我在初学的时候一直误以为回调只有异步的,在学习promise的时候才发现回调不仅有异步的,也有同步的。下面就分别来看看他们两个的不同吧~

异步回调函数

💡 不会立即执行,会等到主线程忙完了才执行。(例如定时器的回调,Ajax中成功/失败函数的回调)

以我们最熟悉的setTimeout函数为例

setTimeout(function(){
   console.log(1);
},1000);
console.log(2);

执行步骤:立即输出2,等待一秒后输出1

原因详解:js引擎是分为主线程和任务队列的,先执行主线程上的代码,执行完毕后才执行任务队列中的代码。 console.log(2);是主线程上的任务,而setTimeout中的回调函数是任务队列中的任务,所以得等2输出一秒后才能输出1。

Untitled (1).png

明白了第一个例子之后,如果把1000毫秒改成0,输出结果肯定也就很容易理解了~

setTimeout(function(){
   console.log(1);
},0);
console.log(2);

结果:立即输出2,后立即输出1

原因详解:即使等待的毫秒数改成0秒,但setTimeout中的回调函数依旧是异步任务(在任务队列中),所以必须等到主线程执行完毕之后才能执行该回调函数。

Untitled (2).png

💥学习到这里,请你再思考一个问题:setTimeout是回调函数吗?

👉不是。一定要注意在文章开篇就给出的回调函数通俗易懂的解释:我们定义的,我们没有调用,最终执行了。 setTimeout是系统定义的,并且我们调用了,所以它肯定不是回调函数。

那哪个是回调函数呢

setTimeout(function(){
   console.log(1);
},1000);

红色的部分才是回调函数。我们定义的✅,我们没有调用✅(因为是匿名函数,我们自然没办法直接调用),最终执行了✅(当主线程的任务执行完毕后,这个回调函数就自动执行了)。三个要求都满足,所以红色部分的才是回调函数。

同步回调函数

💡 压根没往队列里放,在主线程中。(例如数组中的一系列回调函数)

示例:

let arr = [1,3,4,5];
arr.forEach(function(){
     console.log(item);
})
console.log(7);

该同步回调函数直接在主线程中,所以应该先输出1 3 4 5 ,然后再输出7.

输出结果:1 3 4 5 7