Search code examples
javascriptvue.jstimersetinterval

VueJS - Display Countdown of setInterval function


I have a function being triggered within mounted, and then it gets called every 15 minutes after that. In my component I want to display a countdown until the next setInterval in minutes/seconds.

 async mounted() {
  this.pullData();
  setInterval(function(){this.pullData(); }, 900000);  
},
async pullData() {
   this.loading = true;
   const getData = await axios.get(`/api/v1/card/${this.card}`);
   this.data = await getData.data.data;
   this.loading = false;
}

How am I able to repeatedly countdown the time until the next setInterval runs?


Solution

  • in pullData function create new interval and add leftTime = 900000 field which will updating every second :

    async pullData() {
       setInterval(() => {
         this.leftTime = -= 1000;
         console.log(leftTime)
       }, 1000);
       this.loading = true;
       const getData = await axios.get(`/api/v1/card/${this.card}`);
       this.data = await getData.data.data;
       this.loading = false;
    }