Javascript 如何在第一次单击而不是第二次单击时为div指定settimeout？

以下是我制作的小提琴的链接：

这是基本代码

这里是我需要帮助的地方，当你点击黑框时，黑色背景打开，500毫秒后，红色框出现，这正是我需要的。但是，当我再次单击红色框时，需要500毫秒才能将其关闭，如何绕过设置超时，使其与黑色背景同时关闭

HTML:

JS:

使用

$（“.workImg”）.one（'click'，function（）{

工作示例：

尝试以下操作：

var firstClick=false;
$(document).ready(function(){
    $(".workImg").click(function() {

        if(!firstClick)
        {
            firstClick=true;
            //Code to be executed after first click
        }
        else{
            //Code to be executed for more than 1 clicks
        }
    });
});

---

谢谢Nathan，这将对我计划在lightbox中构建的东西起作用，我忘了我可以嵌套if's！！！我仍然是dev的新站点，但是慢慢地到达那里，花了几个小时试图弄明白这一点，仍然学到了一些东西。再次感谢！没问题，很高兴我能帮助：-）

.workImg {
        background:#151515;
        width:330px;
        height:201px;
        display:inline-block;
        position: relative;
    }
    .test {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index:100;
        width: 0;
        height: 0;
        -webkit-transition-duration: 300ms;
        -webkit-transition-property: all;
        -webkit-transition-timing-function: ease-in-out;
        text-align: center;
        background: white;
        color: white;
        font-family: sans-serif;  /* Just 'cos */
    }

    .test.open {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position:fixed;
        color:black;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .testthree {
        width:0;
        height:0;
        background-color: red;
        margin:auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .testthree.fart {
        width:50%;
        height:300px;

    }

    .testthree.close {
        display:none;
    }
    .workName {
        text-align:center;
        margin-top:17px;
    }

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(this).find(".test").toggleClass("open");

        if ($(this).find(".test").hasClass("one")) {
            setTimeout(function(){
                $( ".testthree" ).toggleClass( "fart" );
            }, 500);
        }
     });
});

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(this).find(".test").toggleClass("open");

        if ($(this).find(".test").hasClass("one")) {
            if($('.testthree').hasClass("fart")) {
                $(".testthree").removeClass("fart");
            }
            else {
                setTimeout(function(){
                    $( ".testthree" ).addClass( "fart" );
                }, 500);
            }        
        }
     });
});

var firstClick=false;
$(document).ready(function(){
    $(".workImg").click(function() {

        if(!firstClick)
        {
            firstClick=true;
            //Code to be executed after first click
        }
        else{
            //Code to be executed for more than 1 clicks
        }
    });
});