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 相关文章推荐
js加强的经典分页实例
Mar 15 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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中获取系统信息的方法
2013/06/25 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
sails框架的学习指南
2014/12/22 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python使用Tesseract库识别验证
2018/03/21 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
2013年军训通讯稿
2014/02/05 职场文书
青年文明号创建承诺
2014/03/31 职场文书
个人自我剖析材料
2014/09/30 职场文书
大学生军训感言
2015/08/01 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python