如何实现点击后延迟2秒显示消息并2秒后自动消失？

需求说明 #

点击对应元素后，延迟2秒显示提示消息，消息显示2秒后自动从页面消失。当前代码直接插入消息后立即启动2秒倒计时移除，未实现「先延迟显示」的效果，尝试嵌套setTimeout未达预期。

当前代码 #

JavaScript #

function messagePT () {
    let messagePortuguese = "<p id='invisivel' class='site-content'>O site é recente e continua em construção. As nossas desculpas por quaisquer problemas encontrados.</p>";
    document.getElementById("flag-pt").innerHTML = messagePortuguese;
    setTimeout(() => {
        let elem = document.querySelector('#invisivel');
        elem.parentNode.removeChild(elem);
    }, 2000);
}
function messageEN () {
    let messageEnglish = "<p id='invisivel' class='site-content'>The site is still quite new and remains under construction. Our apologies for any problems encountered.</p>";
    document.getElementById("flag-pt").innerHTML = messageEnglish;
    setTimeout(() => {
        let elem = document.querySelector('#invisivel');
        elem.parentNode.removeChild(elem);
    }, 2000);
}

HTML #

<ul class="intro-lang-menu" id="success-btn">
        <li><a href="/intro" class="intro-lang-pt" onclick="messagePT();"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-pt.png"></a></li>
        <li><a href="en/intro" class="intro-lang-en" onclick="messageEN();"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-en.png"></a></li>
    </ul>

<div id="flag-pt" class="site-content">
</div>

解决方案 #

核心思路 #

通过**嵌套setTimeout**实现时序控制：外层定时器延迟2秒插入消息，内层定时器在消息插入后延迟2秒移除消息。同时处理a标签跳转导致消息无法显示的问题，并优化代码复用性。

修改后的代码 #

JavaScript

// 通用消息显示函数，统一处理延迟显示和自动消失逻辑
function showMessage(messageText) {
  const container = document.getElementById("flag-pt");
  // 清空容器，避免多次点击叠加消息
  container.innerHTML = '';
  
  // 延迟2秒插入消息
  setTimeout(() => {
    // 创建消息元素（比innerHTML更安全）
    const messageElem = document.createElement('p');
    messageElem.id = 'invisivel';
    messageElem.className = 'site-content';
    messageElem.textContent = messageText;
    container.appendChild(messageElem);
    
    // 消息显示后，延迟2秒移除
    setTimeout(() => {
      messageElem.remove();
    }, 2000);
  }, 2000);
}

// 葡萄牙语消息触发
function messagePT() {
  showMessage("O site é recente e continua em construção. As nossas desculpas por quaisquer problemas encontrados.");
}

// 英语消息触发
function messageEN() {
  showMessage("The site is still quite new and remains under construction. Our apologies for any problems encountered.");
}

HTML

<ul class="intro-lang-menu" id="success-btn">
  <!-- 添加return false阻止a标签默认跳转，确保消息能正常显示 -->
  <li><a href="/intro" class="intro-lang-pt" onclick="messagePT(); return false;"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-pt.png"></a></li>
  <li><a href="en/intro" class="intro-lang-en" onclick="messageEN(); return false;"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-en.png"></a></li>
</ul>

<div id="flag-pt" class="site-content">
</div>

关键说明 #

1. 嵌套定时器时序：外层setTimeout控制「点击后等待2秒显示消息」，内层setTimeout控制「消息显示2秒后消失」，完全匹配需求时序。
2. 阻止a标签跳转：原代码中点击a标签会立即刷新页面，导致消息无法显示，添加return false;阻止默认跳转行为（若业务需要跳转，可改为在新页面通过URL参数/localStorage触发消息显示）。
3. 代码复用与安全性：抽离通用showMessage函数减少冗余，使用createElement创建元素比直接插入innerHTML更安全，避免XSS风险。
4. 容器清空：每次显示消息前清空容器，防止多次点击导致消息叠加。

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