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 相关文章推荐
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
如何用JS实现简单的数据监听
May 06 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 缓存实现代码及详细注释
2010/05/16 PHP
php生成excel列序号代码实例
2013/12/24 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
ExtJS 入门
2010/10/29 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python中的self用法详解
2019/08/06 Python
Django接收自定义http header过程详解
2019/08/23 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
GWebs公司笔试题
2012/05/04 面试题
竞聘书格式及范文
2014/03/31 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
动物科学专业求职信
2014/07/27 职场文书
店面出租协议书范本
2014/11/28 职场文书
预备党员表决心的话
2015/09/22 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书