Javascript 如何在X秒后更改文本？HTML

我希望在用户单击三秒钟后更改文本。我希望用户单击并在屏幕上放置一些文本（这已经起作用了），三秒钟后文本变为空白（“”）。我尝试的代码是：

JavaScript: 函数almuerzo（）{ 变量日期=新日期（）； var horas=date.getHours（）； var minutos=（date.getMinutes（）<10？'0'：''）+date.getMinutes（）； document.getElementById（“accion”）.innerHTML=horas+“：”+minutos+“Almuerzo”； } 函数cambio（）{ var-contador=0； 设定间隔（cambio，1000）； contador++； 如果（contador==3） document.getElementById（“accion”）.innerHTML=“”； } HTML:

---

您试图在

cambio

函数上使用递归，但是每次调用它时它都会重新初始化它的

contador

变量，因此

contador==3

条件永远不会为真

我不认为一秒钟等三次有什么意义，而不是三秒钟等一次。如果每秒没有其他操作要执行，只需在等待一次后执行操作：

function cambio() {
    setInterval(function() {
        document.getElementById("accion").innerHTML = "";
    }, 3000);
}

如果确实存在代码尚未显示的点，则需要在函数范围外定义

contador

变量。此外，在递归之前，计数器应递增，如果已达到目标值，则不应进行递归：

var contador = 0;
function cambio() {
    if(contador == 3) {
        document.getElementById("accion").innerHTML = "";
    } else {
        contador++;
        setInterval(cambio, 1000);
    }
}

---

您试图对

cambio

函数使用递归，但每次调用它时它都会重新初始化它的

contador

变量，因此

contador==3

条件永远不会为真

我不认为一秒钟等三次有什么意义，而不是三秒钟等一次。如果每秒没有其他操作要执行，只需在等待一次后执行操作：

function cambio() {
    setInterval(function() {
        document.getElementById("accion").innerHTML = "";
    }, 3000);
}

如果确实存在代码尚未显示的点，则需要在函数范围外定义

contador

变量。此外，在递归之前，计数器应递增，如果已达到目标值，则不应进行递归：

var contador = 0;
function cambio() {
    if(contador == 3) {
        document.getElementById("accion").innerHTML = "";
    } else {
        contador++;
        setInterval(cambio, 1000);
    }
}

---

你只需要一个函数就可以做到这一点。首先更改文本，并在三秒后使用setTimeout删除文本

比如：

var超时；
函数changeText（）{
var elem=document.getElementById（“accion”）；
变量日期=新日期（）；
var horas=date.getHours（）；
var minutos=（date.getMinutes（）<10？'0'：''）+date.getMinutes（）；
elem.innerHTML=horas+“：”+minutos+“Almuerzo”；
clearTimeout（超时）；
timeout=setTimeout（函数（）{
elem.innerHTML=“”；
}, 3000);
}

您只需一个功能即可完成此操作。首先更改文本，并在三秒后使用setTimeout删除文本

比如：

var超时；
函数changeText（）{
var elem=document.getElementById（“accion”）；
变量日期=新日期（）；
var horas=date.getHours（）；
var minutos=（date.getMinutes（）<10？'0'：''）+date.getMinutes（）；
elem.innerHTML=horas+“：”+minutos+“Almuerzo”；
clearTimeout（超时）；
timeout=setTimeout（函数（）{
elem.innerHTML=“”；
}, 3000);
}

我发现最简单的方法就是声明一个函数，然后删除匿名函数中的文本

function almuerzo() {
    var date = new Date();
    var horas = date.getHours();
    var minutos = (date.getMinutes() < 10? '0' : '')+ date.getMinutes();
    document.getElementById("accion").innerHTML = horas + ":" + minutos + " Almuerzo";

    setTimeout(() => {document.getElementById("accion").innerHTML = ""}, 3000);
}

---

我发现最简单的方法就是声明一个函数，然后删除匿名函数中的文本

function almuerzo() {
    var date = new Date();
    var horas = date.getHours();
    var minutos = (date.getMinutes() < 10? '0' : '')+ date.getMinutes();
    document.getElementById("accion").innerHTML = horas + ":" + minutos + " Almuerzo";

    setTimeout(() => {document.getElementById("accion").innerHTML = ""}, 3000);
}

---

可能重复的请避免在单击图像时调用两个函数，我可以看到上面的代码。@Kris不希望完全相同，但如您所愿。可能重复的请避免在单击图像时调用两个函数，我可以看到上面的代码。@Kris不希望完全相同，但如您所愿，Mate没有将文本设置为空，如果计数器正常工作，它不应该在3秒钟内消失吗？@almartinez，它应该消失。请确保您使用的是我的答案的最后一个版本，我编辑了一些错误。虽然没有将文本设置为“无”，但仍然保持单击时的状态，如果计数器工作正常，不应该在3秒钟内消失？@almartinez应该是这样的。确保你使用的是我的答案的最后一个版本，我编辑了一些错误，比如我的

setInterval（cambio，1000）没有括号，但它不会那样调用函数，不是吗？它每1秒调用一次函数cambio。您可以使用此语法来
setInterval（function（）{cambio（）；}，1000）
Oh ok nice，刚才还以为没有括号的cambio仍然可以在setInterval（）内工作呢，感谢您的解释它是
setInterval（cambio，1000）没有括号，但它不会那样调用函数，不是吗？它每1秒调用一次函数cambio。您可以使用此语法来
setInterval（function（）{cambio（）；}，1000）
Oh ok nice，刚才还以为没有括号的cambio仍然可以在setInterval（）内工作呢，谢谢您的解释
function cambio() {
    var contador = 0; 
    setInterval(cambio, 1000); /* relaunch asynchronously cambio, 
    reset contador to 0, then relaunch cambio, etc...*/

    contador++;                 // contador === 1

    if(contador == 3)           /* it will never be triggered
    because in each instance of cambio that will run in parallel,
    cambio value will be equal to 1 */
        document.getElementById("accion").innerHTML = "";

    }