这是我参与「第四届青训营 」笔记创作活动的第1天
今天我学习了Promise,进行如下总结。在学习promise之前,应该要先弄清楚回调是什么?
⇒ 我们定义的,我们没有调用,最终执行了。 (❗这一点很重要)
分类
我在初学的时候一直误以为回调只有异步的,在学习promise的时候才发现回调不仅有异步的,也有同步的。下面就分别来看看他们两个的不同吧~
异步回调函数
💡 不会立即执行,会等到主线程忙完了才执行。(例如定时器的回调,Ajax中成功/失败函数的回调)以我们最熟悉的setTimeout函数为例
setTimeout(function(){
console.log(1);
},1000);
console.log(2);
执行步骤:立即输出2,等待一秒后输出1
原因详解:js引擎是分为主线程和任务队列的,先执行主线程上的代码,执行完毕后才执行任务队列中的代码。 console.log(2);是主线程上的任务,而setTimeout中的回调函数是任务队列中的任务,所以得等2输出一秒后才能输出1。
明白了第一个例子之后,如果把1000毫秒改成0,输出结果肯定也就很容易理解了~
setTimeout(function(){
console.log(1);
},0);
console.log(2);
结果:立即输出2,后立即输出1
原因详解:即使等待的毫秒数改成0秒,但setTimeout中的回调函数依旧是异步任务(在任务队列中),所以必须等到主线程执行完毕之后才能执行该回调函数。
💥学习到这里,请你再思考一个问题: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