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中的Document文档对象
Jan 16 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
微信小程序 form组件详解
Oct 25 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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 变量定义方法
2009/06/14 PHP
培养自己的php编码规范
2015/09/28 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
python实现简单遗传算法
2020/09/18 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
几道PHP的面试题
2012/05/19 面试题
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
爱护公物演讲稿
2014/09/09 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014年校长工作总结
2014/12/11 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技