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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序实现简单表格
Feb 14 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 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
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
一个JQuery操作Table的代码分享
2012/03/30 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python清空文件并替换内容的实例
2018/10/22 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
python3 re返回形式总结
2020/11/20 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
仓库管理专业个人的自我评价
2013/12/30 职场文书
理想演讲稿范文
2014/05/21 职场文书
服装设计专业求职信
2014/06/16 职场文书
服务理念标语
2014/06/18 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
校园安全广播稿范文
2014/09/25 职场文书
阿甘正传观后感
2015/06/01 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
小学记事作文之200字
2019/08/06 职场文书
创业计划书之酒店
2019/08/30 职场文书