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

Question

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

JavaScript：

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";
}

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

HTML：

<h1 id="accion" class="t-accion"></h1>
<img src="img/almuerzo.png" class="i-almuerzo" height="100px" onclick="almuerzo()" onclick="cambio()" />

Answer 1

我发现最简单的方法是只声明一个函数并删除匿名函数中的文本

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);
}

一些解释：

关键是 cambio 是手工制作的 setInterval 但你犯了一些错误：

setInterval(cambio, 1000) cambio 没有 () 是一个 [Object: function] （执行 typeof(cambio) & typeof(cambio()) 来查看差异）所以你没有调用你不会拥有的函数从它的调用返回值！

此外，请记住 setInterval 使函数的执行是异步的，因此在您的代码中，它将 contador 设置为 0，然后启动另一个实例（如果您已将括号放入 cambio），然后递增 1 并退出执行。第二个实例会将 contador 设置为 0 并启动另一个实例，依此类推...

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 = "";

    }

Answer 2

你可以只用一个函数来做到这一点。先改文字，三秒后用setTimeout去掉文字。

喜欢：

var timeout;
function changeText() {
  var elem = document.getElementById("accion");

  var date = new Date();
  var horas = date.getHours();
  var minutos = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();

  elem.innerHTML = horas + ":" + minutos + " Almuerzo";

  clearTimeout(timeout);
  timeout = setTimeout(function() {
    elem.innerHTML = "";
  }, 3000);
}

Answer 3

您尝试在 cambio 函数上使用递归，但每次调用它时都会重新初始化其 contador 变量，因此 contador == 3 条件永远不会为真。

我看不出等待 3 次 1 秒而不是 1 次 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);
    }
}