2 Javascript Таймауты происходят одновременно

Question

У меня есть 2 Javascript тайм-аутов, которые должны создавать анимацию, но происходят одновременно, даже если у них тайм-аут 1 с.

JavaScript:

    $( document ).ready(function() {
    let filter = document.querySelector('.filter');
    let body = document.querySelector('body');


    setTimeout(moveRight, 1000);
    setTimeout(scaleRotate, 1000);


    function moveRight() {
        filter.style.marginLeft="10%";
        body.style.overflow = "hidden";
    }
    function scaleRotate() {
        let deg = 90;
        filter.style.webkitTransform = 'rotate('+deg+'deg)'; 
        filter.style.width = "100vh";
    }
});

HTML

    <div class="header">
        <div class="filter"></div>
        <div class="header-text ml-5">
            <h2 class="font-weight-bold">Andrei Bunea</h2>
            <h3 class="mt-3">full stack developer</h3>
        </div>
    </div>

Answer 1

Вы устанавливаете им аналогичную задержку. Если вы хотите, чтобы scaleRotate сработало через 1 секунду после moveRight, вы можете установить таймер scaleRotate в moveRight timer:

setTimeout(moveRight, 1000);


function moveRight() {
    console.log("moveRight");
    setTimeout(scaleRotate, 1000);
}
function scaleRotate() {
    console.log("scaleRotate");
}