select下拉框change事件中设置定时器

先来看一张图片，说一下需求

微信图片_20220609153645.png

要求是选中秒数，定时刷新列表，直接上代码吧

<span>定时刷新：</span>
<el-select
    v-model="refres"
    placeholder="请选择"
    size="small"
    @change="shuaxin"
   >
     <el-option
      v-for="item in refresh"
      :key="item.value"
      :label="item.label"
      :value="item.value"
     >
     </el-option>
</el-select>
export default {
    data () {
      return {
        refresh: [{
          value: '1',
          label: '30秒'
        }, {
          value: '2',
          label: '1分钟'
        }, {
          value: '6',
          label: '3分钟'
        }, {
          value: '10',
          label: '5分钟'
        }],
        refres: '1',
        timer: null, // 定时器的名字
      }
    }
}

下面开始写方法

methods: {
    shuaxin (v) {
      // 每次定时器开启前  先清除之前的定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        // 获取列表
        console.log('这是最新的')
        this.getList()
      }, Number(v) * 30000)
    }
},
// 当然别忘了在页面销毁的时候清除定时器
destroyed () {
    clearInterval(this.timer)
}

以上就是 select下拉框change事件中设置定时器 的做法了，哪里有问题欢迎指点