Vue中 使用定时器 (setInterval、setTimeout)

这篇具有很好参考价值的文章主要介绍了Vue中 使用定时器 (setInterval、setTimeout)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout

注意:定时器需要在页面销毁的时候清除掉,不然会一直存在!
1. 循环执行( setInterval )

顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉;
语法:

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...);
 
code/function	        必需。要调用一个代码串,也可以是一个函数。
milliseconds	        必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。
param1, param2, ...     可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
 
 
返回值:	  返回一个 ID(数字),可以将这个ID传递给 clearInterval() 来取消执行。

eg:

开始的时候创建了一个定时器 setInterval ,时间间隔为2秒,每2秒都会调用一次函数 valChange,从而使 value 的值+1。

<template>
  <div>
    <h1>{{value}}</h1>
    <el-button type="primary" @click="start">开始</el-button>
    <el-button type="danger" @click="over">结束</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      timer: "",
      value: 0,
    };
  },
  methods: {
    start(){
      this.timer = setInterval(this.valChange, 2000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    valChange() {
      this.value++;
      console.log(this.value);
    },
    over(){
      clearInterval(this.timer);
    }
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

2. 定时执行 ( setTimeout)

定时执行 setTimeout 是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是不再运行;
语法

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)
 
code/function	         必需。要调用一个代码串,也可以是一个函数。
milliseconds	         可选。执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。
param1, param2, ...	     可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
 
返回值:	返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。

eg:
开始时候创建一个定时器 setTimeout,只在2秒后执行一次方法。文章来源地址https://www.toymoban.com/news/detail-650325.html

let timer = setTimeout(() => {
  //需要定时执行的代码
  console.debug("Hello World");
  }, 2000)

到了这里,关于Vue中 使用定时器 (setInterval、setTimeout)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 定时器的设置和清除setTimeout、setInterval、setImmediate-NodeJs

    JS是单线程运行逻辑,所有的程序默认在一个线程执行,出现排队执行。所有的定时器中,回调函数会在主线程后事件队列中执行。              一次性定时器的 开启:当间隔时间到了,会调用 一次 回调函数,间隔时间的单位是毫秒。               var timer=setTimeout(回

    2024年02月04日
    浏览(45)
  • js:定时器setInterval、clearInterval的使用

    定时器:可以在固定时间间隔,重复调用一个函数 文档 https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval 常用的语法 为了避免this指向问题,一般使用箭头函数 输出结果

    2024年02月04日
    浏览(47)
  • JS 定时器setInterval()

    过多的就不描述了,可以直接参考官方文档: 官方文档:https://developer.mozilla.org/en-US/docs/Web/API/setInterval 参考文档:https://www.jianshu.com/p/55b4eb04b1d3 直接上干货 setInterval(参数1,参数2) setInterval(方法名, 1000 * 60 * 1); 描述:定时执行 间隔执行 注意: 1.参数1可以是一个匿名函数 也可以是

    2024年02月13日
    浏览(57)
  • 记录--你敢信?比 setTimeout 还快 80 倍的定时器

    很多人都知道, setTimeout 是有最小延迟时间的,根据MDN 文档 setTimeout:实际延时比设定值更久的原因:最小延迟时间中所说: 在浏览器中, setTimeout() / setInterval() 的每调用一次定时器的最小间隔是 4ms,这通常是由于函数嵌套导致(嵌套层级达到一定深度)。 在HTML Standard规范

    2024年01月24日
    浏览(46)
  • uni-app使用plus本地推送通知栏信息,不使用第三方个推实现消息在线统一推送、消息通知(MQTT、WebSocket、setInterval定时器)

    plus.push.createMessage() 因项目一直是运行在内网,所以不支持使用uni-push等运行在公网的第三方个推渠道。 那就只能使用 plus.push.createMessage() ,示例代码如下: 参数解释: content : ( String 类型) 必选,消息显示的内容,在系统通知中心中显示的文本内容。 payload : ( String 类型 ) 可

    2024年02月15日
    浏览(47)
  • vue中销毁定时器

    vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。 场景:在A.vue页面有一个定时a,然后跳转到B.vue页面,此时A页面的定时器a依然在运行。 解决方式一: 首先在data里进行定义定时器; 然后在mounted里使用定时器; 最

    2024年02月12日
    浏览(37)
  • VUE设置和清除定时器

    方法一、在生命周期函数beforeDestroy中清除  方法二、使用hook:beforedestroy (推荐) 该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样,但更有优势 1.无需在vue实例上定义定时器,减少不必要的内存浪费 2.设置和清除定时器的代码放在一块,可读性维护性更好 三

    2023年04月09日
    浏览(37)
  • ❤ vue清除定时器Bug

    页面加载,清除定时器 clearTimeout(intm) 问题 遇见的需求是:webapp 从A页面进入B页面,B页面点击按钮,加载完B页面的加载效果进入c,从C页面返回A页面,仍然显示B页面的加载效果 结果定时器一直无法清除在destory销毁之中。后来反复查找修改无果。多次翻看以后,突然之间发现

    2024年02月11日
    浏览(37)
  • 关于vue中如何清除定时器的方法

    一、问题 1、在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景: (1)需要执行一次定时的时候用得到,比如需要在

    2023年04月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包