首次单击时未执行多个设置超时功能答案

【问题标题】：Multiple Set Timeout functions not executing on first click首次单击时未执行多个设置超时功能
【发布时间】：2015-10-10 14:53:54
【问题描述】：

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

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


});

【问题讨论】：

完全错了，真的没有理由将事件处理程序放在超时中，这些超时与点击无关，它们只是延迟添加事件处理程序？另外，委派给* 没有多大意义？

标签： javascript jquery events settimeout target

【解决方案1】：

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

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

【讨论】：

谢谢，回答 Adeneo 的评论让我走上了正轨。现在我有一个不同的问题，但我相信你已经回答了这个问题。