首页 > 其他分享 >vue项目使用定时器每隔几秒运行一次某方法

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

时间:2023-04-18 14:11:23浏览次数:30  
标签:定时器 res null timer 几秒 vue heartBeat 每隔

代码如下:

data() {
  return {
    timer:null, //定时器名称
  };
},
created() {
  this.setTime();
},
beforeDestroy() {
  clearInterval(this.timer);  // 清除定时器
  this.timer = null;
},
methods: {
  setTime(){
    //每隔一分钟运行一次保存方法
    this.timer = setInterval(()=>{
      this.heartBeat();
    },60000)
  },
  heartBeat(){
    axios.post("/api/member/ueditor/heartBeat",{}).then(res=>{
      if (res.code == '200') {
        console.log(res.body.result);
      }else{
        console.log("心跳停止");
      }
    })
  }
}

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

标签:定时器,res,null,timer,几秒,vue,heartBeat,每隔
From: https://www.cnblogs.com/henuyuxiang/p/17329353.html

相关文章

  • 初识vue3
    定义Vue是一款Javascript框架,基于前端三大件,提供了具有组件化,声明式,渐进式的特点的编程模型。核心功能1.声明式渲染2.响应式组件之单文件组件Vue最为核心的组成部分便是单文件组件,文件结尾为*.vue宏观的逻辑是这样的:*.vue创建组件->.js文件中将组件实例化生成一个应用实......
  • vite vue使用pont-engine
    pont-engine是一款阿里的api生成工具!安装依赖即可yarnadd--devpont-engine然后即可使用pontstart问题但是因为默认生成的代码包含cjs的模块语法,所以vite无法识别。另外生成代码前最好把旧的生成目录删除!解决办法因此我做了如下优化,让您一键执行这些操作并生成适......
  • ip 表单验证 vue iview
    ip表单验证vueiviewtemplate<Rowv-show="config.bindIP"><Colspan="12"><FormItemlabel="绑定IP:"prop="userPhoto":rules="[{required:t......
  • vue中使两个不同高度的div(内容长度不一)高度相同
    设置高度height,记得给左右侧div一个最小高度min-height,保证没有内容的时候有一定的高度,内容撑起来的时候再自动适应<el-col:xs="12":sm="6":md="2"class="grid-cell"><divclass="grid-contentbg-purple":style="{height:divH......
  • Vue性能优化
    (目录)Vue性能优化的必要性:Vue框架通过双向数据绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,其本身的性能已经非常强大了,但是在一个Vue项目中还是有一定的优化空间的,性能优化可以使整个网站的访问速度更快,运行更加流程,资源占用消耗更少,降低后续运营成本,所以Vu......
  • Vue3 回顾vue2的响应式原理
    视频vue2.x的响应式实现原理:对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。Object.defineProperty(data,'count',{get(){},set(){}})......
  • vue 课堂笔记
    1、----数组合并----说明:定义两个数组arr1和arr2,然后把这两个合并放入arr3中;constarr1=[1,2,3,4,5]    constarr2=[6,7,8,9] //合并数组   constarr3=[...arr1,...arr2]//转字符串以逗号分割   constarr4=arr3.join(',')   ......
  • Vue2
    Vue的指令:用在dom元素的属性上。​{{}}---差值表达式​v-text:文本显示​v-html:解析html文本​v-on:绑定事件@​v-bind:绑定dom中的属性:​v-show---v-if:隐藏和显示dom元素​v-model:设置和获取表单元素的值---双向绑定​......
  • vue往组件中传值,值在组件内如何实现修改
    Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop'svalue.Propbeingmutated:"type"这是Vue的一个警告提示,意思是应该避免直......
  • wangeditor5 vue2 安装后运行报错 Error in ./node_modules/@wangeditor/editor/d
    问题解决方法:原因就是引入的链接不对,使用cnpm、npm、pnpm、yarn安装插件的时候,路径都是不一样的,所以要对应着改路径就可以了链接:https://github.com/wangeditor-team/wangEditor/issues/4041......