javascript - 首次单击时不执行多个设置超时功能

Question

我有几个函数设置为不同的超时，在任何按钮单击时都会调用这些函数。 由于某种原因，所有这些都不会在第一次点击时执行。

www.bobbysimmonspro.com

此外，作为侧边栏，我很乐意听到有关我处理此问题的方式的任何意见、用于简化的插件以及有关调试此类内容的过程的一般提示或有用链接。

$( 文档 ).ready(function() {

var panelClassName = 'show-front';

$("#cube").toggleClass("backFace");


setTimeout(function(){ 
    $("#show-buttons").on('click', '*', function() {
        $("#cube").removeClass("backFace");
        $("#cube").animate({opacity: .3});
        $("#cube").removeClass( panelClassName );   
    });
}, 500);

setTimeout(function(){ 
    $("#show-buttons").on('click', '*', function() {
            panelClassName = event.target.className;
        });     
}, 1000);


setTimeout(function(){ 
    $("#show-buttons").on('click', '*', function() {        
        $("#cube").addClass( panelClassName );
        $("#cube").animate({opacity: 1});   
    });     
}, 3000);

setTimeout(function(){ 
    $("#show-buttons").on('click', '*', function() {
        $("#cube").addClass("backFace");
    });
}, 3500);


});

Answer 1

在代码中，您使用 setTimeout 方法设置事件处理程序。 我想您真正想做的是在用户单击按钮后延迟触发一些操作。 所以也许是这样的:

$("#show-buttons").on('click', '*', function() {
    setTimeout(function(){
        $("#cube").removeClass("backFace");
        $("#cube").animate({opacity: .3});
       $("#cube").removeClass( panelClassName );   
    }, 500);
});