（九）vue定时setInterval与延迟setTimeout

一、定时函数setInterval，销毁定时clearTimeout。

如页面没隔10s从后台获取下当前时间

<template>
  <div>时间{{timeStr}}</div>
</template>
<script>
import { getTime } from "@/api/test";
export default {
  data() {
    return {
      timeStr: "",
      timer: "" // 定时器
    };
  },
  mounted() {
    this.timer = setInterval(this.getCuTime, 10 * 1000);
  },
  methods: {
    getCuTime() {
      getTime()
        .then(res => {
          this.timeStr = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
//   watch: {
//     "this.timeStr": {
//       handler(val) {}
//     }
//   }
};
</script>
<style scoped>
</style>

@RequestMapping("/timer")
    public ResponseMessage timerTest(){
        Date date = new Date();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        String dateStr = simpleDateFormat.format(date);
        System.out.println("请求时间:"+dateStr);
        return ResponseMessage.success(CommonEnums.CODE_200.code,CommonEnums.CODE_200.message,dateStr);
    }

二、延迟函数setTimeout：

//延迟500毫秒执行  
setTimeout(function () {
         //你的逻辑
        }, 500);
      });