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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
node.js超时timeout详解
Nov 26 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
vue接口请求加密实例
Aug 11 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抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
高效使用Python字典的清单
2018/04/04 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python实现飞行棋游戏
2020/02/05 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
教师自我评价范文
2013/12/16 职场文书
暑期实践思想汇报
2014/01/06 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
七年级上册生物的课件
2019/08/07 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
flex弹性布局详解
2022/03/20 HTML / CSS