如何在VueJS中停止定时器？进度条达100%时终止setInterval

核心解决步骤 #

• 保存setInterval返回的定时器ID，通过clearInterval终止定时器
• 在进度值达到目标阈值时触发停止逻辑
• 修复调试代码的语法错误，确保能实时输出进度变化

修改后的完整代码 #

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,
    timerId: null // 存储定时器ID，用于后续停止定时器
  },
  methods: {
    startProgress: function(){
        var vm = this;
        // 清除旧定时器，避免多次点击创建多个定时器实例
        if(vm.timerId){
            clearInterval(vm.timerId);
        }
        // 重置进度值
        vm.progressWidth = 0;
        // 启动定时器并保存ID
        vm.timerId = setInterval(function(){
            vm.progressWidth += 10;
            // 实时输出当前进度，用于调试
            console.log(vm.progressWidth);
            // 进度达到100px时停止定时器
            if(vm.progressWidth >= 100){
                clearInterval(vm.timerId);
                vm.progressWidth = 100; // 确保进度不超过目标值
            }
        }, 150);
    }
  },
});

关键修改说明 #

1. 新增timerId变量：用于存储定时器的唯一标识，是精准停止定时器的核心前提。
2. 启动前清除旧定时器：防止多次点击按钮后，多个定时器同时修改进度值导致进度条异常加速。
3. 进度停止逻辑：在定时器回调内判断进度是否达到阈值，满足条件时立即终止定时器，并将进度固定为100，避免数值溢出。
4. 修复调试代码：将原代码中错误的赋值判断改为实时输出当前进度，确保调试信息准确反映进度变化。

内容的提问来源于stack exchange，提问作者4r60_