如何覆盖setTimeout？答案

【问题标题】：How to override setTimeout?如何覆盖setTimeout？
【发布时间】：2021-09-29 22:25:40
【问题描述】：

这是一个更大的 Three.js 项目的一部分，但基本上我想要做的是显示一个 div 5 秒，然后根据用户交互使其消失。但是，如果用户在 5 秒结束之前触发交互，则当前 div 必须消失才能被新 div 替换并停留 5 秒。我正在使用 jQuery 进行 DOM 交互这是我的代码：

let lastdiv = 1;
function displayState(text){
    if ($("#temp"+String(lastdiv))){
        $("#temp"+String(lastdiv)).remove();
    }
    lastdiv += 1
    body.append('<div id = "temp' + String(lastdiv) +'" class = "state">' + text + '</div>');
    setTimeout(function(){
        if($("#temp"+String(lastdiv))){
            $("#temp"+String(lastdiv)).remove();
        }
    }, 5000);
}

目前发生的情况是 div 显示 5 秒。如果没有进一步的交互，它就会消失。但是，如果在那 5 秒内有另一个交互，则新的 div 确实会显示，但它会在 5 秒后消失，因为显示前一个 div 即如果我在 div1 显示后 2 秒触发交互，则 div2 将替换 div1 但会消失3 秒后。

如果有更好的方法，请告诉我。提前致谢。

【问题讨论】：

标签： javascript html jquery three.js

【解决方案1】：

跟踪超时并取消它。

const body = $("body");
let lastdiv = 1;
let timer = null;

function hideElement() {
  if (timer) {
    window.clearTimeout(timer);
    $("#temp"+ lastdiv).remove();
    timer = null;
  }
}

function displayState(text){
    hideElement();
    lastdiv += 1
    body.append('<div id = "temp' + lastdiv +'" class = "state">' + text + '</div>');
    timer = setTimeout(hideElement, 5000);
}


displayState("aaa");

window.setTimeout(() => displayState("bbb"), 2000);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

天哪，非常感谢。希望我能投票。

【解决方案2】：

将setTimeout的返回值存储在一个变量中，并调用clearTimeout取消它。

演示：

var a = setTimeout(function() {
  one.style.display = "none";
}, 5000);
one.addEventListener('click', function() {
  clearTimeout(a);
  this.style.display = "none";
  two.style.display = "block";
  setTimeout(function() {
    two.style.display = "none";
  }, 5000);
})

#two {
  display: none;
}

<div id="one">This div will disappear in 5 seconds unless you click it</div>
<div id="two">This div will disappear in 5 seconds</div>

【讨论】：