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 data日期初始化的5种方法
Dec 29 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
YII实现分页的方法
2014/07/09 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP实现微信提现功能
2018/09/30 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python之PyMongo使用总结
2017/05/26 Python
python实现二分查找算法
2017/09/21 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Pandas分组与排序的实现
2019/07/23 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Django REST 异常处理详解
2020/07/15 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
教师自我鉴定范文
2013/11/10 职场文书
酒店节能降耗方案
2014/05/08 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL