关于javascript:select下拉框change事件中设置定时器

先来看一张图片,说一下需要


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

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理