vue实现监听监听input值的变化,停止输入n秒后再去发送请求
- 定义一个全局变量存放计时器
- 定义input输入框事件改变事件
- 写定时器操作代码
直接上代码:
<template>
<div>
<Input type="text" style="width:150px" name="" id="" @on-change="handleChange"></Input>
<div>{{ divText }}</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
divText: "",
};
},
methods: {
handleChange() {
this.delayTimer(0)
},
delayTimer(i){
let j = 100;
//避免开启多个计时器
clearInterval(this.timer);
this.timer = setInterval(() => {
console.log(this.timer);
++i;
if (i == j) {
this.divText = "我执行了!" ;
clearInterval(this.timer);
}
}, 100);
}
},
};
</script>