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

Lguorong

已于 2022-06-10 09:00:40 修改

阅读量457

点赞数 2

文章标签： elementui vue.js javascript

于 2022-06-09 15:53:46 首次发布

本文链接：https://blog.csdn.net/Lguorong/article/details/125204555

版权

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

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

<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事件中设置定时器的做法了，哪里有问题欢迎指点