如何用requestAnimationFrame结合Promise实现动画效果的最佳实践？

本文共计1341个文字，预计阅读时间需要6分钟。

目录+ Promise基础用法+ 结合requestAnimationFrame+ 理解requestAnimationFrame+ 结合Promise与requestAnimationFrame+ Promise基础用法+ JS解决单线程的异步执行问题+ 引入事件循环队列体系

目录

• promise基础用法
• promise结合requestAnimationFrame
• 理解requestAnimationFrame
• 结合promise与requestAnimationFrame

promise基础用法

js为了解决单线程的异步执行问题，引入了事件循环队列体系，这个体系里的队列中都是一个个排着队等待执行的宏任务，settimeout就是一个宏任务，promise是典型的微任务，微任务概念是相对宏任务而言的，可以把微任务理解为宏任务中的队列。因为宏任务是按序执行，所以如果当前宏任务有微任务，只有等当前宏任务的所有微任务执行完毕，才会执行下一个宏任务。所以promise与settimeout不分前后紧挨着出现在代码里，那一定是先执行完promise的回调才会去执行settimeout。