隐藏通知时防止 setTimeout() 每次触发

Question

我有一个简单的弹出通知组件，它应该在 4 秒后隐藏（不透明度：0）。问题是，如果我触发一个使通知出现然后在 4 秒后消失的事件，我希望保留通知。现在一切正常，但 setTimeout() 相互叠加，我只想触发最后一个 setTimeout()，我该如何实现？

所以基本上我希望我的通知保持可见，只要发出事件的按钮被点击，只有最后一次被点击，setTimeout() 应该触发。

这是我有问题的代码：

showNotification(v){
        this.popupProduct = v;
        this.showPopup = true;
        setTimeout(()=>{
            console.log(this.showPopup)  
        this.showPopup = false;

        },4000)
    },

通知的显示由存储在 Vue 数据对象中的 this.showPopup 决定。

Answer 1

一种方法是存储超时的id并在函数开始时清除它：

showNotification(v) {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId)
      this.timeoutId = undefined
    }
    this.popupProduct = v;
    this.showPopup = true;
    this.timeoutId = setTimeout(()=>{
        console.log(this.showPopup)  
    this.showPopup = false;

    },4000)
},

隐藏通知时防止 setTimeout() 每次触发

Prevent setTimeout() from firing every time when hiding notification

javascript

settimeout

eventemitter

vue.js