VUE 定时器

àì夳堔傛蜴生んèń 2023-06-21 15:24 28阅读 0赞

> ## 背景： ##
> 
>                    需要实现 输入登录账号密码后进行二维码扫描登录，因此需要**定时轮询后端的扫描结果**

JS代码：

<script>
    export default {
      data() {
        return {
          QR:'',//二维码
          userId:'',
          wxid:'',
          timer:'',
        }
      },
      methods: {
        submitForm(formName) {
                let url = `验证登录账号密码的  接口`
                let data = {};
                this.$post(url, data).then(retData => {
                  if (retData.code == 1) {
                        // 登录成功后 生成二维码
                        let url = `生成二维码 接口`;
                        let data = {
                              user_id:this.userId,
                              open_id:this.wxid,
                        }
                        this.$post(url, data).then(ret => {
                          if(ret.code == 200){
                            // 获取到 二维码
                            //将 二维码绘画到  页面上
                            this.QR = ret.data.qrCodeUrl;
                            
                            // 设置定时器
                            this.timer = setInterval(()=>{ 
    
                                // 轮询调用 扫描二维码 的结果 接口
                                this.QRCheck(retData) 
                            },1000)
                          }else{
                            this.$message.warning('加载验证二维码失败,请重新登录或联系员')
                          }
                        })
                    } else {
                        this.$message({
                            message: '您输入的，账号或密码错误！',
                            type: 'warning'
                        });
                    }
                }); 
        },
        QRCheck(objData){  
          let url = `扫描二维码 结果  接口`;
          let data = {}
          this.$post(url,data).then(ret => {
              if(ret.code == 200){
                if(ret.data.ScanStatus == "1"){
                  // 扫描结果为 1 则，关闭定时器
                  clearTimeout(this.timer)
    
                  this.$store.dispatch("LoginCommit",objData).then(data => {
                      this.$router.push("/Wdhd");
                  });
                }
              }else{
                clearTimeout(this.timer)
                this.$message.warning('校验二维码失败,请重新登录或联系员')
              }
          })
      }

## 备注： ##

> **设置**定时器
> 
> this.timer = setInterval(()=>\{  
> 
>          //被轮询的 业务  
> 
>         this.QRCheck(retData)
> 
>  \},3000)      //间隔时间 
> 
>  
> 
> **结束**定时器
> 
> clearTimeout(this.timer)
> 
>  
> 
> **this.timer** 是**设置定时器的返回标识**，**结束时**需要 **根据它来操作**

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue设置定时器、清除定时器

1、一次性定时器`setTimeout` let timer = setTimeout(() => { //需要定时执行的代码

系统管理员/ 2024年04月08日 08:37/ 0 赞/ 106 阅读

相关 vue定时器切换页面后停止

在写个小项目，其中前端页面切换后，之前页面的定时器依然不停的往后台发请求。担心数据库的连接隐患，于是切换页面后，让定时器停止。 mounted() {

布满荆棘的人生/ 2024年04月01日 10:17/ 0 赞/ 87 阅读

相关 vue中实现定时器功能

引言在使用vue开发注册页面的时候，需要完成获取邮箱验证码，然后获取按钮进入一分钟倒计时无法点击的需求。大概结果如下图 ![image-202301081849585

短命女/ 2023年09月23日 21:50/ 0 赞/ 127 阅读

相关 vue下的定时器

每秒在控制台打印出一个字符串 this.msg是在data中定义的值 methods:{ //在此处定义实例可用的所有方法 lang(){

本是古典何须时尚/ 2023年07月11日 06:12/ 0 赞/ 20 阅读

相关 VUE 定时器

> 背景： > > 需要实现输入登录账号密码后进行二维码扫描登录，因此需要定时轮询后端的扫描结果 JS代码： <sc

àì夳堔傛蜴生んèń/ 2023年06月21日 15:24/ 0 赞/ 29 阅读

相关 VUE简单的定时器实时刷新

说明：我只是一个刚入门的小前端，你们可以指导我，但千万不要喷我，虽然我知道我很垃圾！人吗，都是要成长的！大佬，请多多指教！！！我前段时间刚刚写了一个类似余股票的项目，上边的

ゞ浴缸里的玫瑰/ 2022年12月05日 12:22/ 0 赞/ 203 阅读

相关 vue中setTimeout定时器的使用

created() { if (this.timer) { clearTimeout(this.timer) }

迈不过友情╰/ 2022年10月14日 15:53/ 0 赞/ 149 阅读

相关 vue：销毁定时器（离开A页面是销毁A的定时器）

一、创建定时器 this.messageListTimer = setInterval(() => { this.initMessageLis

缺乏、安全感/ 2022年09月11日 05:29/ 0 赞/ 150 阅读

相关 vue清除定时器

clearTimeout加在路由钩子函数里面： ![1037118-20180116152207318-922641829.png][] [1037118-201801

偏执的太偏执、/ 2022年04月16日 01:23/ 0 赞/ 225 阅读

相关 vue在mounted中创建定时器与清除定时器

mounted(){ var that=this; var num = 1; var ss='';

朴灿烈づ我的快乐病毒、/ 2022年01月09日 15:53/ 0 赞/ 452 阅读