Как корректно реализовать работу с таймерами?

Question

[kot98]

Нужно выводить уведомление на 10 секунд. Если оно закрылось(само, или при нажатии), то выводить заново через 10 секунд.

data () {
    return {
      isNotificationShown: false,
      notificationMessage: '',
      notifyTimeoutId: null,
      notifyUpdateMessageTimeIntervalId: null,
      desyncNotify: null,
      isNotifyClosed: false,
      test: null
    }
  },
watch: {
items: {
      handler: function (newVal, oldVal) {
        if (newVal.length) {
          // ...some logic
          this.notificationMessage = result
          this.showNotification()
        }
      }
    }
},
methods {
      showNotification () {
      if (!this.isNotificationShown && this.notificationMessage) {
        if (!this.isNotifyClosed) {
          this.callNotify()
        } else {
          this.test = setTimeout(() => {
            this.callNotify()
          }, 10000)
        }
      }
    },
callNotify () {
      if (this.notifyUpdateMessageTimeIntervalId) {
        clearInterval(this.notifyUpdateMessageTimeIntervalId)
        this.notifyUpdateMessageTimeIntervalId = null
      }

      if (this.test) {
        clearTimeout(this.test)
        this.test = null
      }

      this.desyncNotify = this.$q.notify({ 
        group: false,
        message: this.notificationMessage,
        html: true,
        timeout: 0,
        onDismiss: () => {
          this.resetNotify()
        },
        actions: [
          { label: this.$t('actions.close'),
            color: 'white',
            handler: () => {
              this.resetNotify()
            } }
        ]
      })

      this.isNotificationShown = true
      this.isNotifyClosed = false

      this.notifyUpdateMessageTimeIntervalId = setInterval(() => { 
        this.desyncNotify({
          message: this.notificationMessage
        })
      }, 500)

      this.clearNotifyTimeout()
    },
resetNotify () {
      this.isNotificationShown = false
      this.notificationMessage = ''
      this.isNotifyClosed = true
    },
    clearNotifyTimeout () {
      if (this.notifyTimeoutId) {
        clearTimeout(this.notifyTimeoutId)
        this.notifyTimeoutId = null
      }
      this.notifyTimeoutId = setTimeout(() => { 
        clearInterval(this.notifyUpdateMessageTimeIntervalId)
        this.desyncNotify() // close notification
        this.notificationMessage = ''
        this.isNotificationShown = false
        this.isNotifyClosed = true
      }, 10000)
    },
}

Не удается корректно реализовать отображение уведомления через 10 секунд после закрытия

Comments

[Антон Горецкий]

Если важны именно временные интервалы, то использование setInterval и setTimeout неприемлемо, поскольку они гарантируют лишь исполнение "не раньше" указанного времени и только.