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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
js使用ajax读博客rss示例
May 06 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
JS中的三个循环小结
Jun 20 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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短域名转换为实际域名函数
2011/01/17 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
使用Apache的rewrite
2021/03/09 Servers
会自动逐行上升的文本框
2006/06/30 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
跟老齐学Python之print详解
2014/09/28 Python
python发送邮件脚本
2018/05/22 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
django配置app中的静态文件步骤
2020/03/27 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python图片合成的示例
2020/11/09 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
军训自我鉴定范文
2014/02/13 职场文书
销售总经理岗位职责
2014/03/15 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
爱心捐助活动总结
2015/05/09 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
电话营销开场白
2015/05/29 职场文书