How can i stop Interval on VueJS?

Question

I do tryin' make a progress bar with VueJS but when this count equal 100 interval still going process. How can i stop interval when data equal 100 percent?

I used the console.log() command to check if the code is working, but it returns a wrong response.

Best Regards,

That's my code:

HTML:

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <div id="app">
    <button v-on:click="startProgress">Start Progress</button>
    <br><br>
    <div class="progress" :style="{width : progressWidth + 'px'}"></div>
  </div>

CSS:

.progress{
    background-color: pink;
  transition: all 310ms ease;
    width: 0px;
    height: 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

VueJS:

new Vue({
  el: '#app',
  data: {
    progressWidth : 0
  },
  methods: {
    startProgress : function(){
        var vm = this;
        setInterval(function(){
            vm.progressWidth+=10;   
        }, 150);
    vm.progressWidth= 20 ? console.log('20') : console.log('--');
    }
  },
});

if you want you can check live on jsFidde: https://jsfiddle.net/6j05p8Lb/46/

set a this.timer = setInterval into a model then add a condition vm.progressWidth >= 100 clearInterval(this.timer) in inside the timer callback after vm.progressWidth+=10; remove the ternary its going to make your progressWidth value undefined as thats what console.log *returns* — Lawrence Cherone, Jul 30 '22 at 23:20

score -1 · Accepted Answer · answered Jul 31 '22 at 00:19

As mentioned by @Lawrence Cherone, use clearInterval function:

new Vue({
  el: '#app',
  data: {       
    progressWidth: 0    
  },
  methods: {
    startProgress: function() {
      const that = this;
      const timer = setInterval( function() {
        if (that.progressWidth >= 100) {
          clearInterval(timer);
        } else {
          that.progressWidth += 10;
        }
      }, 150);
    }
  }
});

.progress{
    background-color: pink;
  transition: all 310ms ease;
    width: 0px;
    height: 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <div id="app">
    <button v-on:click="startProgress">Start Progress</button>
    <br><br>
    <div class="progress" :style="{width : progressWidth + 'px'}">{{ progressWidth }}</div>
  </div>

How can i stop Interval on VueJS?

1 Answers1