Vue使用轮询定时发送请求代码


Posted in Javascript onAugust 10, 2020

一、什么是轮询?

轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称“程控输出入”(Programmed I/O)。轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始。 在WEB上来说就是客户端一直向服务端发起请求,服务端返回数据,不论返回什么都会再次向服务端发送请求。

二、采用定时器进行轮询

<template>
 <div></div>
</template>
 
<script>
export default {
 data() {
  return {
   num: 0
  };
 },
 created() {
  // 实现轮询
  window.setInterval(() => {
   setTimeout(this.getNewMessage(), 0);
  }, 3000);
 },
 methods: {
  // 请求是否有新消息
  getNewMessage: function() {
   console.log("请求" + this.num++ + "次");
  }
 }
};
</script>
 
<style scoped>
</style>

效果:

Vue使用轮询定时发送请求代码

补充知识:vue 轮询操作

创建一个弹出框

<div>
        <el-dialog
          :visible.sync="loadingVisible"
          width="30%">
        <i class="fa fa-spin fa-star"></i>
        <span>这是一段信息</span>
      </el-dialog>
    </div>

增加按钮

<el-button type="text" @click="doing">智能推荐</el-button>

关键js代码

doing() {
        const vm = this;
        vm.loadingVisible = true;
        vm.timer = setInterval(vm.getstatus, 2000);
      },
 
 
getstatus() {
        const vm = this;
        
        vm.loadingVisible = false;
        clearInterval(vm.timer);
      }
    },

以上这篇Vue使用轮询定时发送请求代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
React实现阿里云OSS上传文件的示例
Aug 10 #Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 #Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
joomla组件开发入门教程
2016/05/04 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
js对象基础实例分析
2015/01/13 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python的标准模块包json详解
2017/03/13 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
手工社团活动方案
2014/02/17 职场文书
幼儿园开学寄语
2014/04/03 职场文书
初三学生个人自我评定
2014/04/06 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
戒赌保证书
2015/05/11 职场文书