Vue中循环倒计时的实现（setInterval定时器立即执行）

最新推荐文章于 2024-06-14 10:40:58 发布

小野oo

最新推荐文章于 2024-06-14 10:40:58 发布

阅读量3.5k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58440770/article/details/124468033

版权

这篇博客介绍了如何在Vue.js应用中创建一个立即开始并循环的倒计时功能，同时在每轮倒计时结束后自动发送请求保存数据。博主解决了setInterval延迟执行的问题，通过绑定this并立即调用函数来确保倒计时的准确性和连续性。代码示例展示了如何在组件的mounted阶段初始化倒计时，并在countDown方法中处理定时器的设置与清除，以及在repeatCountDown方法中实现倒计时的循环。

摘要由CSDN通过智能技术生成

需求：在进入页面时，开始循环倒计时，每当倒计时一轮完成后，发送请求自动保存数据。

有一点较麻烦的是setInterval会有延迟时间，在进入页面后不会立即执行一次，而是先等一次设置的delay过了，才会开始循环，要做到立即执行，需要做相应的处理，我这里用的是通过function()来立即执行，再在函数中返回本身来达到立即执行再开始循环的方法(还有其他方法可自行搜索)。

立即执行setInterval：

// 立即执行setInterval定时器：这里注意改变一下this的指向，把指向vue实例的this传进去，不然this为undefined，返回本身的时候也是同理

let func = function tempFun() {
        console.log("enter sentInterval");
        return tempFun.bind(this);
}.bind(this);

setInterval(func(), 3000);

整体代码如下：

data() {
    return {
      // 页面显示倒计时的数字
      count: 10,
    };
  },

mounted() {
   // 页面初始化调用
   this.repeatCountDown();
  },

methods: {
    // 倒计时
    countDown() {
      // 有定时器 -> 清除定时器(避免重复设置)
      if (window.timer) {
        clearInterval(window.timer);
      }
      // 设置定时器
      window.timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          if (this.count == 0) {
            // 倒计时到0时发送请求 并清除定时器
            // do something
            console.log("send req");
            clearInterval(window.timer);
         }
       }
      }, 1000);
    },

    // 循环倒计时
    repeatCountDown() {
      let func = function tempFun() {
        this.count = 10;
        this.countDown();
        return tempFun.bind(this);
      }.bind(this);
      setInterval(func(), 11000);  // delay要比倒计时的数字大1，因为要倒计时到0
    },
  },