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秒后执行一次方法。

let timer = setTimeout(() => {
  //需要定时执行的代码
  console.debug("Hello World");
  }, 2000)
相关文章
|
6月前
|
JavaScript
定时器问题(vue的问题)
定时器问题(vue的问题)
50 2
|
5月前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
89 2
|
JavaScript
Vue中 使用定时器 (setInterval、setTimeout)
Vue中 使用定时器 (setInterval、setTimeout)
181 0
|
6月前
|
JavaScript
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
422 0
|
6月前
|
JavaScript
vue 定时器:setInterval和setTimeout使用实例及区别
vue 定时器:setInterval和setTimeout使用实例及区别
123 0
|
6月前
|
JavaScript 前端开发
JS实现可以控制的定时器,setInterval,clearInterval
JS实现可以控制的定时器,setInterval,clearInterval
45 0
|
JavaScript 前端开发
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法:setInterval()、setTimeout()、clearInterval(),本文将围绕这三种函数的用法,来实现定时器的功能,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望对大家有所帮助。 定时器的应用需求: 1.设定一个时间,当时间到达的时候执行函数————比如:倒计时跳转页面等等。 2.每隔一段时间重复执行某段函数————比如抢票软件,比如设定500毫秒就重复刷新一次页面等等。 倒计时跳转实现demo:
636 0
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
|
JavaScript
js中两种定时器,setTimeout和setInterval的区别
js中两种定时器,setTimeout和setInterval的区别
83 0
|
JavaScript 前端开发
vue3定时器
vue3定时器
621 0
|
JavaScript API
js:定时器setInterval、clearInterval的使用
js:定时器setInterval、clearInterval的使用
137 0