如何实现定时自动移除通知且保留删除按钮（Vue.js+JavaScript）

Got it, let's tackle this problem step by step. You want each notification to auto-dismiss after 10 seconds while keeping the manual close button—here's how to do it cleanly in Vue.js without memory leaks:

The core idea is to attach a unique timer to each notification, then clean up that timer both when the user manually deletes the notification and when the component unmounts. Here's a complete implementation:

Full Component Example #

<template>
  <div class="notification-wrapper">
    <!-- Render each notification with a manual close button -->
    <div 
      v-for="msg in Messages" 
      :key="msg.id" 
      class="notification-card"
    >
      <span>{{ msg.content }}</span>
      <button 
        class="close-btn"
        @click="handleManualClear(msg)"
      >×</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Messages: [] // Assume each item has `id`, `content` (add more props as needed)
    };
  },
  watch: {
    // Watch for changes to the Messages array to attach timers to new notifications
    Messages: {
      deep: true,
      handler(newMessages) {
        newMessages.forEach(msg => {
          // Only set a timer if one doesn't already exist
          if (!msg.timerId) {
            msg.timerId = setTimeout(() => {
              this.clearMessages(msg);
            }, 10000); // 10-second delay
          }
        });
      }
    }
  },
  methods: {
    async clearMessages(item) {
      // First, clean up the timer to avoid ghost executions
      if (item.timerId) {
        clearTimeout(item.timerId);
        delete item.timerId;
      }

      // Call your server-side function
      try {
        // Replace with your actual API call
        // await yourApiService.clearMessages(item);
        
        // Remove the notification from the local array
        this.Messages = this.Messages.filter(msg => msg.id !== item.id);
      } catch (err) {
        console.error('Failed to clear notification:', err);
      }
    },
    handleManualClear(message) {
      // Reuse the clearMessages method to keep logic DRY
      this.clearMessages(message);
    },
    // Example method to add a new notification (adjust as per your flow)
    addNotification(content) {
      this.Messages.push({
        id: Date.now(), // Use a unique ID (replace with backend ID if available)
        content,
        timerId: null
      });
    }
  },
  beforeUnmount() {
    // Clean up all remaining timers when the component is destroyed
    this.Messages.forEach(msg => {
      if (msg.timerId) clearTimeout(msg.timerId);
    });
  }
};
</script>

<style scoped>
.notification-wrapper {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1000;
}
.notification-card {
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 250px;
}
.close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  margin-left: 1rem;
}
</style>

Key Details to Note #

• Timer Tracking: We add a timerId property to each notification object so we can reference and clear it later—this prevents memory leaks from orphaned timers.
• Unified Clear Logic: Both auto-dismissal and manual deletion use the same clearMessages method, which first cleans up the timer before calling your server function. This ensures no duplicate API calls.
• Component Cleanup: The beforeUnmount hook clears all remaining timers when the component is removed, which is critical for avoiding memory leaks in long-running apps.
• Avoid Duplicate Timers: The watcher checks for an existing timerId before setting a new one, so re-renders or array updates won't create multiple timers for the same notification.

If your Messages array is passed as a prop from a parent component, adjust the logic to emit an event to the parent instead of directly mutating the array (follow Vue's one-way data flow rules).

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