如何覆盖 setTimeout？

Question

这是一个更大的 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 会出现，但它会在显示前一个 div 后的 5 秒内消失，即如果我在 [=18] 后 2 秒触发交互=]1 显示，div2 将替换 div1，但会在 3 秒后消失。

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 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>

如何覆盖 setTimeout？

How to override setTimeout?

html

javascript

jquery

three.js