js中定时器有两种,setInterval是循环执行,setTimeout是定时执行,执行一次
一、循环执行(setInterval)
设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉
用法是setInterval(方法名或方法,延时), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔
<template>
<section>
<h1>hello world~</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0
methods: {
get() {
this.value ++;
console.log(this.value);
mounted() {
this.timer = setInterval(this.get, 1000);
beforeDestroy() {
clearInterval(this.timer);
</script>
上面的例子就是页面初始化的时候创建了一个定时器
setInterval
,时间间隔为1秒,每一秒都会调用一次函数get,从而使value的值加一。
二、定时执行 (setTimeout)
定时执行setTimeout是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是没有运行
用法是setTimeout(方法名或方法, 延时); 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔
<template>
<section>
<h1>hello world~</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0
methods: {
get() {
this.value ++;
console.log(this.value);
mounted() {
this.timer = setTimeout(this.get, 1000);
beforeDestroy() {
clearTimeout(this.timer);
</script>
上面是页面初始化时候创建一个定时器setTimeout,只在1秒后执行一次方法。
定时器需要在页面销毁的时候清除掉,不然会一直存在!!!
js中定时器有两种,setInterval是循环执行,setTimeout是定时执行,执行一次一、循环执行(setInterval)设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉用法是setInterval(方法名或方法,延时), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔<template> <section> <h1>hello world~</h1> &.
项目
中
我们经常需要实现轮询-每隔几秒请求一次接口刷新数据
一般都会
使用
setInterval
,但要注意单纯
使用
它会导致页面卡死,关于怎么解决这个问题感谢年树先生的分享,在此做个记录方便以后查阅
原博地址如下:https://www.qdfuns.com/article/51117/15a67319ddea5b043a466583d7e734c6.html
解决方法如下:
window.s...
在
使用
setInterval
(function,delayTime)方法时,发现它会为函数的第一次调用也做延迟。一般我们都是第一次立即调用,然后延迟调用。我的解决方法如下:
需要延迟调用的函数:
function calli...
自己在项目
中
使用
setInterval
,由于不正确的
使用
,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于
定时器
的用法及注意事项
mouted() {
this.timer =
setInterval
(()=>{
// 要执行的函数
destoryed() {
this.clearInterv...
在
vue
中
,有两套
定时器
,一套是浏览器API,window对象上的;另一套就是
vue
/nodejs封装的,需要引入
import {
setInterval
, clearInterval } from 'timers'
建议
使用
window对象自带的,因为不容易错。
如果一不小心只引入一个,就怎么也清不掉了。
import {
setInterval
} from 'timers' // 错误
在
Vue
中
,可以在生命周期钩子函数
中
使用
setTimeout
和
setInterval
来执行异步操作或定时任务。
例如,在created生命周期钩子函数
中
使用
setTimeout
实现延迟执行:
created() {
setTimeout
(() => {
console.log('延迟执行');
}, 1000);
在mounted生命周期钩子函数
中
使用
setInterval
实现定时任务:
mounted() {
this.intervalId =
setInterval
(() => {
console.log('定时任务');
}, 1000);
beforeDestroy() {
clearInterval(this.intervalId);
需要注意的是,
使用
setInterval
时需要在组件销毁前清除
定时器
,否则可能会导致内存泄漏或其他问题。可以在beforeDestroy生命周期钩子函数
中
清除
定时器
。