如何实现JavaScript InnerHTML内容显示2秒后自动消失？

你的第二个函数逻辑搞反了——它是延迟2秒才把文本设置到元素里，自然是等2秒才显示。要实现“显示2秒后消失”，得先立刻显示文本，再设置定时器在2秒后清空内容。

基础实现代码 #

var j = 0;
function buttonClick() {
    // 立即更新内容，让文本显示出来
    const text = ++j + " added to cart";
    const cartElement = document.getElementById('rope111');
    cartElement.innerHTML = text;
    
    // 2秒后清空元素内容，实现消失效果
    setTimeout(() => {
        cartElement.innerHTML = '';
    }, 2000);
}

优化：处理快速点击的情况 #

如果用户快速多次点击按钮，之前的定时器可能还没执行就被新的覆盖，导致内容提前消失。可以加入定时器ID管理，每次点击清除之前的定时器：

var j = 0;
let cartTimer = null; // 保存定时器ID

function buttonClick() {
    const text = ++j + " added to cart";
    const cartElement = document.getElementById('rope111');
    cartElement.innerHTML = text;
    
    // 清除上一次未执行的定时器
    if (cartTimer) {
        clearTimeout(cartTimer);
    }
    
    // 设置新的2秒后清空的定时器
    cartTimer = setTimeout(() => {
        cartElement.innerHTML = '';
        cartTimer = null; // 执行后重置ID
    }, 2000);
}

注：代码里给text和元素变量加上了const声明，避免全局变量污染，是更规范的写法。

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