（九）vue定时setInterval与延迟setTimeout

向右看齐 2023-07-23 07:00 18阅读 0赞

一、定时函数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);
          });

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript延时setTimeOut与定时setInterval函数区别

1、js延时函数setTimeOut(回调函数,延时时间) 应用：希望页面等待一段时间之后去做某一件事情（只做一次）。定义延时函数： <script type=

淡淡的烟草味﹌/ 2023年10月10日 10:58/ 0 赞/ 47 阅读

相关（九）vue定时setInterval与延迟setTimeout

一、定时函数setInterval，销毁定时clearTimeout。如页面没隔10s从后台获取下当前时间 <template> <div>时间{

向右看齐/ 2023年07月23日 07:00/ 0 赞/ 19 阅读

相关 setTimeout和setInterval

概念：超时调用概念：setTimeout(func,ms) 等待ms时间之后执行回调函数func，只执行一次，调用setTimeout会返回一个ID，表示超时调用，超

Love The Way You Lie/ 2023年07月13日 15:30/ 0 赞/ 35 阅读

相关 setInterval、setTimeout

下边例子得出结论：不管是setInterval、setTimeout 返回的标识是同步的，而执行是异步的，会先输出标识，紧接着被清除了，所以定时器里边的打印没有输出！

今天药忘吃喽~/ 2023年03月12日 12:17/ 0 赞/ 181 阅读

相关 setInterval与setTimeout（超详细）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

喜欢ヅ旅行/ 2023年01月12日 14:58/ 0 赞/ 870 阅读

相关 setInterval和setTimeout

setInterval(func, 1000) 在1000毫秒后，每隔1000毫秒执行1次 setInterval(func(), 1000) 在1000毫秒后执行1次

╰+哭是因爲堅強的太久メ/ 2022年09月25日 04:15/ 0 赞/ 260 阅读

相关 setInterval与setTimeout区别详解

17javascript会员们都知道，setInterval和setTimeout这两个函数有什么作用，下面17javascript来详细说明他们的区别。 s

爱被打了一巴掌/ 2022年08月13日 06:59/ 0 赞/ 273 阅读

相关 JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

男娘i/ 2022年08月11日 16:36/ 0 赞/ 206 阅读

相关 setInterval和setTimeout

在项目的支付模块中，最后选用的是支付宝二维码支付方式，增添的一个算是比较有技术含量的东西，就是采用轮询的方式，监听订单状态，对二维码进行刷新。代码如下： ![这里写图

叁歲伎倆/ 2022年05月21日 07:48/ 0 赞/ 369 阅读

相关 setTimeOut setInterval clearTimeOut

瞄一眼这些Js函数setTimeOut setInterval clearTimeOut,蒙了。为什么呢？当然是概念混淆了！刚查了一下，做个纪念先： setInte

缺乏、安全感/ 2022年01月07日 03:55/ 0 赞/ 284 阅读