JavaScript如何在转换结束前防止点击

Question

点击我希望后台改变，但是如何在转换完成之前防止点击？

var box = document.querySelector('.box'); 

var colors = ['red', 'green', 'blue']; 
var i = 0; 

box.addEventListener('click', function() { 
    box.style.background = '' + colors[i] + ''; 
    console.log(colors[i]); 

    i++; 
    if (i == 3) { 
     i = 0; 
    } 
}); 

代码： http://jsbin.com/nizufi/2/edit?html,css,js,output

Answer 1

您可以使用JavaScript事件transitionend：

var box = document.querySelector('.box'); 
var colors = ['red', 'green', 'blue']; 
var i = 0; 
var transitioning = false; 

box.addEventListener('click', function() { 
    if(transitioning) { 
     return; 
    } 

    box.style.background = '' + colors[i] + ''; 
    console.log(colors[i]); 

    i++; 
    if (i == 3) { 
     i = 0; 
    } 

    transitioning = true; 
}); 

box.addEventListener('transitionend', function() { 
    transitioning = false; 
});