如何重写setTimeout解决Three.js项目中div倒计时不重置问题

1. 未清除上一次交互触发的延时器，旧延时器到期后仍会执行删除逻辑
2. setTimeout回调为闭包，引用的是全局lastdiv变量而非创建定时器时的变量快照，旧定时器执行时会直接删除当前最新的div，导致新div展示时间被旧计时覆盖
3. 全局递增ID维护提示元素的方案无意义，额外增加了代码维护成本

// 全局存储定时器ID，固定提示元素ID
let stateTimer = null
const STATE_TIP_ID = 'state-tip'

function displayState(text) {
    // 清除上一次未执行的延时任务
    if (stateTimer) {
        clearTimeout(stateTimer)
        stateTimer = null
    }
    // 移除已存在的提示元素
    $(`#${STATE_TIP_ID}`).remove()
    // 插入新的提示内容
    $('body').append(`<div id="${STATE_TIP_ID}" class="state">${text}</div>`)
    // 启动新的5秒倒计时
    stateTimer = setTimeout(() => {
        $(`#${STATE_TIP_ID}`).remove()
        stateTimer = null
    }, 5000)
}

• 用固定ID维护提示元素，删除无意义的ID递增逻辑，代码更简洁
• 每次触发新交互优先清空上一次的定时器，从根源解决旧计时干扰问题
• 定时器执行后自动清空存储的ID，避免无效变量残留
• 如果需要兼容低版本ES环境，将模板字符串替换为普通字符串拼接即可：$('body').append('<div id="' + STATE_TIP_ID + '" class="state">' + text + '</div>')

内容的提问来源于stack exchange，提问作者Aditya De