如何在Vue.js中为线上网站编写定时自动调用函数？

Got it, let's break this down. You need a standalone, event-agnostic function in Vue.js that periodically checks your Firestore collection/documents on a set interval—no clicks, changes, or load triggers required. Here's exactly how to implement this properly, with attention to Vue's lifecycle and best practices for Firestore.

The key here is to tie your timer to Vue's component lifecycle (or your app's global lifecycle) to avoid memory leaks. You'll start the timer when your component/app mounts, and clean it up when it unmounts.

If you're using Vue 3 with the Composition API, this is the cleanest approach:

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { db } from './firebase-config' // Import your pre-configured Firebase instance
import { collection, getDocs } from 'firebase/firestore'

let intervalId = null

// Your Firestore check function
async function checkFirestoreData() {
  try {
    // Replace 'your-target-collection' with your actual collection name
    const querySnapshot = await getDocs(collection(db, 'your-target-collection'))
    
    // Process the results—customize this to your needs
    querySnapshot.forEach(doc => {
      console.log(`Document ID: ${doc.id}, Data: ${JSON.stringify(doc.data())}`)
      // Example: Update a reactive variable with fresh data
      // updateYourReactiveState(doc.data())
    })
  } catch (error) {
    console.error('Failed to check Firestore:', error)
  }
}

onMounted(() => {
  // Start the timer: run every 5 minutes (300000 ms)
  // Adjust the interval to your needs—avoid overly frequent calls to save Firestore quota
  intervalId = setInterval(checkFirestoreData, 300000)
  
  // Optional: Run the function immediately on mount instead of waiting for the first interval
  checkFirestoreData()
})

onUnmounted(() => {
  // Critical: Clean up the timer when the component unmounts to prevent memory leaks
  if (intervalId) clearInterval(intervalId)
})
</script>

For Vue 2 users, here's the equivalent implementation:

<script>
import { db } from './firebase-config'
import { collection, getDocs } from 'firebase/firestore'

export default {
  data() {
    return {
      intervalId: null
    }
  },
  methods: {
    async checkFirestoreData() {
      try {
        const querySnapshot = await getDocs(collection(db, 'your-target-collection'))
        querySnapshot.forEach(doc => {
          console.log(`Document ID: ${doc.id}, Data: ${JSON.stringify(doc.data())}`)
        })
      } catch (error) {
        console.error('Failed to check Firestore:', error)
      }
    }
  },
  mounted() {
    this.intervalId = setInterval(this.checkFirestoreData, 300000)
    this.checkFirestoreData() // Immediate run on mount
  },
  beforeUnmount() {
    if (this.intervalId) clearInterval(this.intervalId)
  }
}
</script>

• Clean Up the Timer: Always clear the interval when your component unmounts or the app shuts down. Failing to do this will leave orphaned timers running in the background, causing memory leaks.
• Avoid Overly Frequent Calls: Firestore has usage quotas and costs associated with reads. Don't set intervals shorter than necessary (e.g., 1 second) unless you have a specific business need—start with minutes or hours, then adjust.
• Handle Async Concurrency: If your Firestore query takes longer to complete than your interval duration, you could end up with overlapping requests. Add a simple lock to prevent this:

  let isChecking = false
  
  async function checkFirestoreData() {
    if (isChecking) return // Skip if a check is already in progress
    isChecking = true
    
    try {
      // Your Firestore logic here
    } finally {
      isChecking = false // Release the lock regardless of success/failure
    }
  }
  

If you need this check to run even when no specific component is mounted, set up the timer in your app's entry file (main.js):

import { createApp } from 'vue'
import App from './App.vue'
import { db } from './firebase-config'
import { collection, getDocs } from 'firebase/firestore'

let intervalId = null

async function globalFirestoreCheck() {
  try {
    const querySnapshot = await getDocs(collection(db, 'your-target-collection'))
    // Process results as needed
  } catch (error) {
    console.error('Global Firestore check failed:', error)
  }
}

const app = createApp(App)
app.mount('#app')

// Start the global timer
intervalId = setInterval(globalFirestoreCheck, 300000)
globalFirestoreCheck()

// Clean up when the window closes
window.addEventListener('beforeunload', () => {
  if (intervalId) clearInterval(intervalId)
})

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