使用 setTimeout 和 if 来控制对象 (Javascript)

Question

练习时遇到问题Javascript。我想制作一个可以点击的正方形。单击后，方块消失并在 3 秒后显示。代码如下

document.getElementById("box").addEventListener("click",function(){
    this.style.display="none";
});


if (document.getElementById("box").style.display=="none"){
    setTimeout(function(){
        document.getElementById("box").style.display="block";
    }, 3000);
}

这是一个JS Bin
那么如何更正上面的代码呢？ setTimeout.

好像有问题

Answer 1

取出你的if语句：

document.getElementById("box").addEventListener("click",function(){
   this.style.display="none";
   setTimeout(function(){
       document.getElementById("box").style.display="block";
   }, 3000);
});

永远不会设置 setTimeout 函数，因为当页面加载时您的 "box" 没有隐藏...

Answer 2

你的代码是这样写的：

当框被点击时，隐藏它，但是现在，在它被点击之前，看它是否被隐藏（提示：不会，因为它还没有被点击），如果是，则在三秒后显示。

将代码从 if 语句中移出并移至点击函数处理程序中。

完全删除 if 语句（因为您知道它在单击后会是什么状态）。

Answer 3

您需要在事件监听器中设置超时时间

document.getElementById("box").addEventListener("click",function(){
    this.style.display="none";

    setTimeout(function(){
        this.style.display="block";
    }, 3000);

});

Answer 4

像这样更改您的代码以获得您的结果，正如@quentin 所说。

document.getElementById("box").addEventListener("click",function(){
    this.style.display="none";
    setTimeout(function(){
        this.style.display="block";
    }, 3000);}
});

Answer 5

如果将 3 秒超时代码移动到侦听器中，它会正常工作：

document.getElementById("box").addEventListener("click",function(){
    this.style.display="none";

    setTimeout(function(){
        document.getElementById("box").style.display="block";
    }, 3000);
});

使用 setTimeout 和 if 来控制对象 (Javascript)

Use setTimeout and if to control objects (Javascript)

javascript

if-statement

settimeout