vue定时任务执行接口

记录打开弹框进行定时接口调用，进行数据刷新，关闭弹框停止定时任务调用接口

methods: {}   定义函数方法

 watch: {}  监视数据变化

代码实现

vue:

<el-button type="text" @click="setTime()">点击查看实时日志</el-button>
      <el-dialog
        title="执行日志"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="60%"
      >
        <div>
          <pre v-html="jenkinslog" id="testlog"></pre>
        </div>
      </el-dialog>

js:

methods: {
    //后端接口，查看日志
      getjenkinslog() {
      this.$axios.get("/select_jenkins_log/").then((res) => {
        if (res.status === 200) {
          let a = res.data.result;
           //拼接刷新加载效果
          this.jenkinslog = a.concat('<i class="el-icon-loading"></i>');
        }
      });
    },
    //这个启动定时器可以在打开弹框click事件里面进行调用
    setTime() {
       //打开弹框
      this.dialogVisible = true;
      //设置定时器
      this.clearTimeSet = setInterval(() => {
        this.getjenkinslog();
      }, 5000);
    },
    clearTime() {
      //清除定时器
      clearInterval(this.clearTimeSet);
    },
  },

watch: {
    //弹框的状态变量
    dialogVisible: {
      //操作后监听数据的变化，新数据和老数据
      handler(new, old) {
        //通过新数据判断如果是false（弹框关闭）清除定时器
        if (new == false) {
          this.clearTime();
        }
      },
      immediate: false,
    },
  },

效果如下