Vue设置定时器和清除定时器—微信支付轮询

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue设置定时器和清除定时器—微信支付轮询，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1612字，纯文字阅读大概需要3分钟。

内容图文

业务需求：
打开微信支付模态框，扫码，二维码有效期为5分钟，5分钟后关闭模态框，支付成功后关闭模态框并跳转页面。

需求分析：
在项目中遇到支付完成后轮询，获取当前的最新支付状态，确定订单是否支付成功。此时需要设置定时器。
如果定时器不及时地清除，会造成浏览器崩掉，请求多次可能会使服务器崩掉，此时就需要清除定时器。
在某个页面中启动定时器后，一定要在页面关闭时将定时器清除掉，在Vue的声明周期函数 beforeDestroy() 中清除定时器。

代码实现：

<script>
export default {
  data() {
    return {
      time: null, //定义setInterval的定时器名称
      setTime: null //定义setTimeout的定时器名称
    }
  },
  methods: {
    // 微信支付扫码
    weChatScan(paymentPluginId, sn) {
      // 请求
      wechatSubmit({
        paymentPluginId: paymentPluginId,
        sn: sn
      })
        .then((res) => {
          return 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        })
        .then((data) => {
          this.imgUrl = data //二维码
          this.dialogVisible = true
          // 启动定时器
          this.time = setInterval(() => {
            // 判断是否支付成功
            wechatnotify({
              sn: sn
            }).then((res) => {
              if (res.data.type == 'success') {
                this.time && this.clearTimer() //清除定时器
                this.dialogVisible = false
                this.$router.push({ path: '/financialInfo' })
              }
            })
          }, 1000)
          // 5分钟后关闭模态框、清除定时器
          this.setTime = setTimeout(() => {
            this.clearTimer()
            this.dialogVisible = false
          }, 5 * 60 * 1000)
        })
    },
    //清除定时器
    clearTimer() {
      clearInterval(this.time)
      clearTimeout(this.setTime)
      this.time = null
      this.setTime = null
    },
    // 关闭模态框前
    handleClose() {
      this.imgUrl = ''
      this.clearTimer()
    }
  },
  // beforeDestroy()生命周期内清除定时器
  beforeDestroy() {
    clearInterval(this.time)
    clearTimeout(this.setTime)
    this.time = null
    this.setTime = null
  }
}
</script>

内容总结

以上是互联网集市为您收集整理的Vue设置定时器和清除定时器—微信支付轮询全部内容，希望文章能够帮你解决Vue设置定时器和清除定时器—微信支付轮询所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---