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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
JS实现京东商品分类侧边栏
Dec 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
TensorFlow的权值更新方法
2018/06/14 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
Python 随机按键模拟2小时
2020/12/30 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
教育英语专业毕业生的求职信
2014/03/13 职场文书
主持稿开场白
2015/06/01 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Django使用redis配置缓存的方法
2021/06/01 Redis