vue实现定时器

在Vue中实现定时器的方法

在Vue中实现定时器可以通过JavaScript原生的setInterval和setTimeout方法，结合Vue的生命周期钩子函数来管理定时器的创建和销毁。

使用setInterval创建周期性定时器

export default {
  data() {
    return {
      timer: null,
      counter: 0
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.counter++
      console.log('Counter:', this.counter)
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

使用setTimeout创建一次性定时器

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      console.log('Timer executed after 3 seconds')
    }, 3000)
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  }
}

在Composition API中使用定时器

import { ref, onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    const counter = ref(0)
    let timer = null

    onMounted(() => {
      timer = setInterval(() => {
        counter.value++
        console.log('Counter:', counter.value)
      }, 1000)
    })

    onBeforeUnmount(() => {
      clearInterval(timer)
    })

    return { counter }
  }
}

使用Vue插件封装定时器功能

可以创建一个可复用的定时器插件：

const TimerPlugin = {
  install(app) {
    app.config.globalProperties.$createTimer = function(callback, interval) {
      const timer = setInterval(callback, interval)
      return {
        stop: () => clearInterval(timer)
      }
    }
  }
}

// 在main.js中使用
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(TimerPlugin)
app.mount('#app')

// 组件中使用
export default {
  mounted() {
    const timer = this.$createTimer(() => {
      console.log('Timer tick')
    }, 1000)

    // 停止定时器
    // timer.stop()
  }
}

注意事项

确保在组件销毁时清除定时器，避免内存泄漏。在Options API中使用beforeDestroy或beforeUnmount钩子，在Composition API中使用onBeforeUnmount钩子。

定时器回调中访问Vue实例数据时，确保使用箭头函数或正确绑定this上下文。

对于需要精确计时的场景，考虑使用requestAnimationFrame或专门的计时库如luxon或date-fns。