多个设置超时函数在第一次单击时不执行

Question

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

www.bobbysimmonspro.com

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

$(文档).ready(函数(){

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);
});

多个设置超时函数在第一次单击时不执行

Multiple Set Timeout functions not executing on first click

javascript

jquery

events

target

settimeout