vue学习（三）定时任务 demo测试例子

最新推荐文章于 2025-06-26 23:31:00 发布

原创最新推荐文章于 2025-06-26 23:31:00 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

前端日常专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一个使用Vue实现的定时任务开关功能，通过一个全局变量控制定时任务的开启与关闭，并展示了如何使用Vue的watch监听器来监测状态变化，进而启动或停止定时任务。

<template class="bgdiv-content-view">
  <div
            class="toolbar-one"
            style="height: 30px;margin-top: 5px;">
            <el-switch
              v-model="kicktest"
              active-text="开启"
              inactive-text="关闭"/>
          </div>
</template>

 data() {
   return {
      kicktest: false, // 随机测试全局变量
   }
 }
 watch: {
    kicktest(val) { //检测
      if (val) {
        console.log('开启')
        console.log(val)
        this.stratTest()
      } else {
        console.log('关闭定时任务')
        console.log(val)
        clearInterval(this.testRandomKickId)
      }
    }
 }
methods: {
    stratTest() {
      console.log('开启定时任务')
      var self = this
      self.testRandomKickId = setInterval(doRefreshRandomKick, 2000) // 定时器刷新
      function doRefreshRandomKick() {
        console.log('随机t人')
      }
    }
}

效果：