如何实现点击按钮后延迟显示元素，指定时长后自动隐藏

核心问题说明 #

• 你的自动隐藏判断逻辑仅在页面初始化时执行1次，此时提示框默认是隐藏状态，判定条件alert.style.display==="block"永远不触发，因此对应的隐藏逻辑不会运行
• 单次延迟执行的场景使用setTimeout更适配，不需要用setInterval执行一次就手动清除，属于API使用冗余
• 额外注意：不要用alert作为全局变量名，会覆盖浏览器原生的window.alert方法，引发意料之外的问题

修改后可运行代码 #

JS代码 #

document.getElementById("mybtn").addEventListener("click",function(){
    // 点击后延迟0.5秒显示提示框
    setTimeout(() => {
        const alertEl = document.getElementById('alert');
        alertEl.style.display = 'block';
        // 提示框显示后，延迟2000毫秒（可自行调整时长）自动隐藏
        setTimeout(() => {
            alertEl.style.display = 'none';
        }, 2000)
    }, 500)
})

HTML代码和原有逻辑保持一致即可： #

<button id="mybtn">Show/hide</button>
<div id="alert" style="display:none"><h3>this is an alert</h3></div>

效果说明 #

点击按钮后，0.5秒弹出提示框，提示框展示2秒后自动隐藏，符合类alert的交互效果，两个setTimeout的时长参数可以根据实际需求自行调整。

内容的提问来源于stack exchange，提问作者user17071394