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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
JS实现点击Radio动态更新table数据
Jul 18 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
Nuxt的路由动画效果案例
Nov 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
js 函数调用模式小结
2011/12/26 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript中的闭包
2016/02/24 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
解决DataFrame排序sort的问题
2018/06/07 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
班主任寄语大全
2014/04/04 职场文书
代理人委托书
2014/08/01 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2014年领班工作总结
2014/11/25 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers