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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
javascript定时器完整实例
Feb 10 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
JavaScript实现alert弹框效果
Nov 19 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
Oracle 常见问题解答
2006/10/09 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
javascript中的几个运算符
2007/06/29 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
python处理cookie详解
2014/02/07 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
python去除文件中重复的行实例
2018/06/29 Python
python二元表达式用法
2019/12/04 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
会计专业自荐信
2013/12/02 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
优质护理心得体会
2016/01/22 职场文书