Javascriptの遷移が次々と変わる

Question

私がやりたいことは、ユーザーがボタンをもう一度押すと最初から遷移を再生することです。今の問題は、ユーザーがボタンを2回以上クリックすると、2つのアニメーションが適切に（1つずつ）開始されないことです。

今のところトランジションは機能していますが、ユーザーがボタンを2回以上クリックした場合にはこの問題を解決できません。

let button = document.querySelector("button") 
let box = document.querySelector(".box") 

button.onclick =() => { 

    box.style.transform = ""; 

    anim1(function(){ 
    anim2(function() { 

    }) 
    }) 

} 


function anim1(cb) { 
    box.style.transition = "" 
    box.clientHeight; 
    box.style.transition = "all 1s"; 
    box.style.transform = "translateX(50px)"; 
    setTimeout(() => { 
    cb() 

    },1000) 
} 

function anim2(cb) { 
    box.style.transition = "" 
    box.clientHeight; 
    box.style.transition = "all 1s"; 
    box.style.transform = "translateX(350px)"; 
    setTimeout(() => { 
    cb() 

    },1000) 
} 

ライブ例https://jsfiddle.net/kzjpb55f/

Answer 1

クリアclearTimeoutと保留タイムアウト新しいクリックイベントを取得するたび：

let button = document.querySelector("button") 
 
let box = document.querySelector(".box") 
 
let timer; // use this variable to trace any pending timeout 
 

 
button.onclick =() => { 
 
    clearTimeout(timer); // clear any pending timeout 
 
    box.style.transform = ""; 
 

 
    anim1(function(){ 
 
    anim2(function() { 
 
     
 
    }) 
 
    }) 
 
    
 
} 
 

 
function anim1(cb) { 
 
    box.style.transition = "" 
 
    box.clientHeight; 
 
    box.style.transition = "all 1s"; 
 
    box.style.transform = "translateX(50px)"; 
 
    timer = setTimeout(cb,1000); // remember last created timeout 
 
} 
 

 
function anim2(cb) { 
 
    box.style.transition = "" 
 
    box.clientHeight; 
 
    box.style.transition = "all 1s"; 
 
    box.style.transform = "translateX(350px)"; 
 
    timer = setTimeout(cb,1000); // remember last created timeout 
 
}

.box { 
 
    height:50px; 
 
    width:50px; 
 
    background-color:red; 
 
}

<button>animate</button> 
 
<div class="box"></div>

Answer 2

、現在はそうでない場合はfalseアニメーションが実行されている場合は、単に真である別の変数を追加することができます。

I updated your fiddleこれを行う方法の例があります。

let button = document.querySelector("button") 
let box = document.querySelector(".box") 
let animating = false; 

button.onclick = (e) => { 



    if (!animating) { 
    box.style.transform = ""; 

    animating = true; 
    anim1(function(){ 
     anim2(function() { 
     animating = false; 
     }) 
    }) 

    } 

} 


function anim1(cb) { 
    box.style.transition = "" 
    box.clientHeight; 
    box.style.transition = "all 1s"; 
    box.style.transform = "translateX(50px)"; 
    setTimeout(() => { 
    cb() 

    },1000) 
} 

function anim2(cb) { 
    box.style.transition = "" 
    box.clientHeight; 
    box.style.transition = "all 1s"; 
    box.style.transform = "translateX(350px)"; 
    setTimeout(() => { 
    cb() 

    },1000) 
}