如何覆盖settimeout？

nhn9ugyo 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(361)

这是一个更大的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秒钟内消失，即如果在显示div1后2秒钟触发交互，则div2将替换div1，但会在3秒钟后消失。
如果有更好的方法，请告诉我。提前谢谢。

jquery JavaScript Html three.js

来源：https://stackoverflow.com/questions/68488222/how-to-override-settimeout

2条答案

按热度按时间

zz2j4svz1#

跟踪超时并取消它。

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>

赞(0）回复(0）举报 2021-09-13

h7wcgrx32#

存储的返回值 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>

赞(0）回复(0）举报 2021-09-13

我来回答

如何覆盖settimeout？

2条答案

相关问题

热门标签

最新问答