vue项目使用定时器每隔几秒运行一次某方法代码实例

目录
  • 代码如下：
  • setInterval（）和setTimeout（）的区别：
  • 补充知识：定时执行 （ setTimeout）
  • 总结

代码如下：

data() {
  return {
    timer:null, //定时器名称
  }
}，
created() {
  this.setTime();
},
beforeDestroy(){
  clearInterval(this.timer);　　// 清除定时器
  this.timer = null;
},
methods: {
　　setTime(){
　　//每隔一分钟运行一次保存方法
      this.timer = setInterval(()=>{
        this.saveList();
      },60000)
    },
    saveList(){

    }
}

上面这样写已经实现功能，关闭页面不会继续执行。长时间运行页面也没有卡死。

有人说，setInterval（）里面嵌套setTimeout（）

setinterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。 其原因与JS引擎线程有关（需深入研究JS引擎线程） ，但是setTimeout是自带清除定时器的。 我没有出现页面卡死的情况所以就没加setTimeout。

        setInterval(() => {
            setTimeout(() => {
                this.queryChartTime()
            }, 0)
        }, 10000)

setInterval（）和setTimeout（）的区别：

一个是循环执行setInterval，另一个是定时执行setTimeout

1:setInterval 循环执行， 每隔一段时间执行一次， 多次执行。

2:setTimeout 到时间后执行， 只执行一次。

在beforeDestroy()生命周期内清除定时器

定时器需要在页面销毁的时候清除掉，不然会一直存在！！

补充知识：定时执行 （ 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)

总结

到此这篇关于vue项目使用定时器每隔几秒运行一次某方法的文章就介绍到这了,更多相关vue定时器每隔几秒运行一次内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中清除定时器的方法实例详解

    目录 一.问题 二.问题出现的原因 三.问题解决思路 四.实现的源代码 五.总结 一.问题 1.在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继续执行. 2.在这里需要说一下setTimeout的使用场景: (1)需要执行一次定时的时候用得到,比如需要在多久之后执行的一次操作 (2)接口需要定时查询,并且需要在接口返回数据后再查询的情况下(接口定时查询的时候,

  • Vue中使用定时器(setInterval、setTimeout)的两种方式

    目录 1. 循环执行( setInterval ) 2. 定时执行 ( setTimeout) js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout. 注意:定时器需要在页面销毁的时候清除掉,不然会一直存在! 1. 循环执行( setInterval ) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉:语法: setInterval(code, milliseconds): setInterval(f

  • VUE设置和清除定时器的方式及遇到的问题

    目录 方法一.在生命周期函数beforeDestroy中清除 方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案 附:vue离开页面销毁定时器 总结 方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l

  • vue中定时器setInterval的使用及说明

    目录 深坑 声明 销毁 that 是指vue , this是指定时器 positionTimer 总结 深坑 自己在项目中使用setInterval,由于不正确的使用,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于定时器的用法及注意事项 声明 mouted() { this.timer = setInterval(()=>{ // 要执行的函数 }) } 销毁 destoryed() { this.clearInterval(this.timer) } 看起来是很简单也没

  • python每隔N秒运行指定函数的方法

    本文实例讲述了python每隔N秒运行指定函数的方法.分享给大家供大家参考.具体如下: 这是一个类似定时器的效果,每隔指定的秒数运行指定的函数,采用线程实现,代码简单实用. 复制代码 代码如下: import os import time def print_ts(message):     print "[%s] %s"%(time.strftime("%Y-%m-%d %H:%M:%S", time.localtime()), message) def run(

  • js每隔两秒输出数组中的一项(实例)

    实例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/2.0.0/jquery.min.js"></script> </head> <body> <div i

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: <div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item" @dragstart="dragStart($event, item.labelName)" draggable='true' v-for="(item, index) in modelCommonList" :key="index" @click=&quo

  • Vue项目中数据的深度监听或对象属性的监听实例

    众所周知,vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.根据vue的文档,不难发现,使用数据的深度监听来达到这一效果.具体实现如下: watch: { evlist: { handler(val, oldVal) { this.isTeam = val.projectParty; this.pjtid = val.pjtid; this.isFinish =

  • 详解Vue项目在其他电脑npm run dev运行报错的解决方法

    详解Vue项目在其他电脑npm run dev运行报错的解决方法

    一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 缺少 node_modules 里面的依赖.在项目目录下使用 npm install 然后再 npm run dev. 如果在这一步当中, npm install 执行的过程中,处于一直卡顿的状态.说明网络状况不佳.建议使用 cnpm 淘宝源. 淘宝源 使用 cnpm -v 查看是否已经安装 cnpm

  • 如何解决vue项目打包后文件过大问题

    如何解决vue项目打包后文件过大问题

    目录 为什么打包后文件过大? 如何快速解决 1.路由懒加载[使用es6提案的import()方式] 2.CDN引入 为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

随机推荐