随笔- 148 文章- 1 评论- 61 阅读- 73万

动态添加的Promise按顺序执行

原文链接：https://www.cnblogs.com/yalong/p/17935043.html

动态添加的Promise异步事件按顺序执行

需求描述

用户点击一次页面上的一个按钮，就播放一个动画，如果点击n次就触发n次动画；
在播放动画的同时，如果再点击按钮，那么会把n的次数累加，动画播放也增加对应的次数；
同时支持在动画队列没播放完的时候，可以手动取消后续的动画播放

实现的效果展示

定时器设置为2秒，可以看到不管点击多少次，都是2秒后触发一次，期间可以取消，取消后再点击还是之前的逻辑
因为视频转为gif之后，显示播放的慢了，看打印的时间其实还是2秒的间隔
可以自行复制下面的代码，运行看下效果

代码实现

下面代码中用setTimeout模拟异步，具体的动画可以放在里面，外面用Promise包裹

<html>
    <style>
        .container {
            border:  1px solid red;
            min-height: 100px;
        }
    </style>
    <body>
        <button id="btn">点我触发事件</button>
        <button id="btn2">点我取消事件</button>
        <button id="btn3">清屏</button>
        <ul class="container">
        </ul>
    </body>
    <script>
        let eventArr = []; //异步事件队列
        let isRunning = false; // 是否正在执行异步事件
        let timerArr = []; // 定时器的数组 用来清除定时器用

        let p = function () {
            return new Promise((resolve, reject) => {
                let t = setTimeout(() => {
                    let d = new Date()
                    let node = document.createElement('li');
                    node.innerHTML = `${eventArr.length + 1} - ${d}`
                    document.querySelector('.container').appendChild(node);
                    resolve(d);
                }, 2000);
                timerArr.push(t);
            });
        }

        document.querySelector('#btn').addEventListener('click', async function(){
            eventArr.push(p);
            if (!isRunning) {
                runner();
            }
        });

        // 取消事件
        document.querySelector('#btn2').addEventListener('click', async function(){
            eventArr = [];
            timerArr.forEach(item => {
                clearTimeout(item);
            });
            timerArr = [];
            isRunning = false;
        });

        // 清屏
        document.querySelector('#btn3').addEventListener('click', async function(){
            document.querySelector('.container').innerHTML = ''
        });

        async function runner (){
            if (eventArr.length) {
                isRunning = true;
                let temp = eventArr.shift();
                await temp();
                timerArr.shift(); // 执行完再去掉
                if (eventArr.length) {
                    runner();
                } else {
                    isRunning = false;
                    return;
                }
            } else {
                isRunning = false;
                return;
            }
        }
    </script>
</html>