如何让多个通知提示排队显示而不是同时弹出？

UI嘉兴提问于 2026-01-29 06:26:37 阅读 35

交互

最近在做订单系统时遇到个难题，用户频繁点击操作按钮会触发多个通知提示，但它们总是堆叠在一起看不清内容…

我用Vue写了个基础的通知组件，通过数组管理提示项，但排队逻辑有问题。比如连续点击三次按钮，三个提示应该依次显示，但实际上它们会同时出现几秒后一起消失。我试过用setTimeout控制显示时间，但效果还是不好：



  
    
    
      {{ msg }}
      
    
  



export default {
  data() {
    return {
      notifications: [],
      timer: null
    }
  },
  methods: {
    showNotification() {
      const newMsg = `订单${Date.now()}处理中`
      this.notifications.push(newMsg)
      if (!this.timer) {
        this.timer = setTimeout(() => {
          this.notifications.shift()
          this.timer = null
        }, 3000)
      }
    }
  }
}

我发现当快速点击时，后添加的通知会覆盖之前的定时器，导致队列顺序被打乱。有没有更好的方式让通知像队列一样一个接一个显示？求大神指点具体实现方法！

通知提示

我来解答赞 17 收藏

反馈

2 条解答

宇文颖萓 Lv1

这个问题很常见，根本原因是你用了一个定时器去处理整个队列，但每次点击都可能重置或干扰这个定时器。正确的做法是让通知队列自己管理播放节奏，每个通知显示完再触发下一个。

常见的解决方案是使用异步队列机制，配合 Promise 和 setTimeout 来实现串行播放。你不需要一次性给所有通知设定时器，而是让队列按顺序逐个处理。

你可以改写逻辑如下：

export default {

  data() {

    return {

      notifications: [],

      queue: [] // 存储待显示的消息

    }

  },

  methods: {

    showNotification() {

      const newMsg = 订单${Date.now()}处理中

      this.queue.push(newMsg)

      // 只有在没有任务运行时才启动队列处理

      if (this.queue.length === 1) {

        this.processQueue()

      }

    },

    async processQueue() {

      while (this.queue.length > 0) {

        const msg = this.queue[0] // 取出第一个消息

        this.notifications.push(msg)



        // 等待3秒显示时间

        await new Promise(resolve => setTimeout(resolve, 3000))



        // 移除当前通知和队列头

        this.notifications.splice(this.notifications.indexOf(msg), 1)

        this.queue.shift()

      }

    }

  }

}

这样每次点击都会把消息推进 queue，只有当前一个显示完后才会处理下一个。关键是用 async/await 配合 Promise 做异步等待，避免定时器冲突。

另外注意 DOM 渲染要基于 notifications 数组里的内容，建议每条通知带个唯一 id 更安全，防止重复文本导致删除错乱。比如可以用 Symbol 或 uuid 当 key。

核心就是：不要共享一个定时器，而是让队列主动控制流程，一个结束再下一个。这套模式在 toast、message 组件里非常通用，Element UI 和 Ant Design 都是这么干的。

2026-02-10 19:02

迷人的小利 Lv1

你这个通知队列的问题挺常见的，很多开发者都会遇到类似情况。试试这个方法，用递归加延时来处理队列，效果会好很多。

核心思路是：每次只处理一个通知，等它显示完再递归处理下一个，而不是用一个定时器去控制所有通知。

改一下你的代码逻辑：

export default {

  data() {

    return {

      notifications: [], // 存放通知的队列

      showing: null // 当前正在显示的通知

    }

  },

  methods: {

    showNotification() {

      const newMsg = 订单${Date.now()}处理中

      this.notifications.push(newMsg) // 添加到队列

      if (!this.showing) {

        this.nextNotification() // 如果没有正在显示的通知，则启动队列

      }

    },

    nextNotification() {

      if (this.notifications.length > 0) {

        this.showing = this.notifications.shift() // 取出第一个通知

        setTimeout(() => {

          this.showing = null // 3秒后清空当前通知

          this.nextNotification() // 递归处理下一个

        }, 3000)

      }

    }

  }

}

模板部分稍微调整下：

<div v-if="showing">

  {{ showing }}

</div>

这样写的好处是每个通知都能按顺序显示，而且不会互相干扰。快速点击按钮时，通知会乖乖排队，一个接一个弹出来。

如果你还想加点动画效果，可以用Vue的过渡组件<transition>，让通知进出更平滑。不过这是进阶功能，先解决基础问题再说。

2026-01-30 23:02