大家好，我是麦当。
最近遇到一个需求，要求鼠标悬浮的时候播放视频，移除的时候暂停，实现的过程遇到了不少坑，还是因为对 JS 的理解不够深入，特此记录一下。
实现思路
首先要明确，视频播放是个异步操作，如果单纯的使用再 over 的时候播放，leave 的时候暂停，100% 会出问题，有可能 leave 的时候视频才刚刚开始播。因此我们要利用 video.play() 返回一个 promise 的特性，将视频的播放、暂停操作放到一个队列中，这个队列的并发量为 1，也就是只能一个一个执行，除非 mouseover 时 play 的 promise 执行 resolve 了，否则不会执行 mouseleave 的行为。
完整代码
我用 pLimit 来控制并发量，这个库非常好用，有不了解的小伙伴可以看我这篇介绍 p-limit 的文章。然后定义了一个用于存放异步任务的队列。控制这个队列的方法分别是 mouseover 和 moouseleave，他们要做的就是往队列中添加新的异步任务。当队列长度变化时，会触发 useEffect 的执行，然后就 promise.all 一下，挨个执行异步任务就完事儿了。
