[Raadsert]

Я имею ввиду несколько другое понятие очереди. Например этот же код (я его немного исправил), если несколько раз нажимать на кнопку - анимация будет воспроизводится по новой. А вот каким образом сделать так, чтоб каждое нажатие на кнопку ставило запуск новой функции анимации в некую очередь, и анимация воспроизводилась одна после другой?

1 нажатие на кнопку => animate()
2 нажатие на кнопку => animate() animate()
3 нажатие на кнопку => animate(), animate(), animate()
(при условии что анимация вызванная первым нажатием ещё не завершилась)

<div id="moved" style="position: absolute;width:30px;height: 30px;background: red; pointer-events: none;"></div>
    <br>
    <input type="button" onclick="but1()" value="кнопка 1"> <br>

    <script type="text/javascript">
        function but1 (){
            const element = document.getElementById("moved");
            animateMove( element , 500 , 100 , 1500)
        }

        /*  С async/await
        async function but1 (){
            const element = document.getElementById("moved");
            await animateMove( element , 800 , 100 , 1500);
            await animateMove( element , -750 , 10 , 200);
            await animateMove( element , 150 , -60 , 1000);

            element.style.background = ("#" + ( Math.random() * (999-100)+100 )).substr(0,4) ;
            element.style.top = "30px";
            element.style.left = "100px";
        }
        */

        function animateMove ( element , x , y , time = 1000){
            const startX = element.offsetLeft;
            const startY = element.offsetTop;
            const startTime = performance.now();
            return new Promise ( (resolve) => {
                const animate = function (timenow){
                    const EA = (timenow - startTime) / time;
                    if (EA > 1) {
                        resolve();
                    } else {
                        element.style.translate = `${startX + (x * EA)}px ${startY + (y * EA)}px`;
                        requestAnimationFrame(animate);
                    }
                };
                animate(startTime);
            })
        }

    </script>