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树形控件脚本代码
Jul 24 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
Javascript中this的用法详解
Sep 22 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
详解Node.js如何处理ES6模块
May 15 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
人族 TERRAN 概述
2020/03/14 星际争霸
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php日期操作技巧小结
2016/06/25 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python 闭包的使用方法
2017/09/07 Python
深入浅析Python的类
2018/06/22 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python中 * 的用法详解
2019/07/10 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
法学院方阵解说词
2014/01/29 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers