vue 监听input停止输入后发送请求

我们要实现用户停止输入才去请求AJAX的一个功能

---

在网上看了很多文章, 觉得写得都不是特别好

1. 基本上都是用库loadsh, 不讲原理思路, 只贴如何用工具实现代码
2. 看到一个写得非常好的思路,我照着这个思路实现了下这个功能
3. 利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。就是当你停止输入500毫秒后才会执行函数

---

来看看用vue实现这样的一个功能, 贴代码

data(){

return{

lastTime:0,

}

}

代码语言：javascript复制

keyword(newVal){
        if(this.lastTime == 0){ 
          this.lastTime = setTimeout(()=>{
            // AJAX(newVal)
          },2000)
        }else{
          clearTimeout(this.lastTime)
          this.lastTime = setTimeout(()=>{
            // AJAX(newVal)
          },2000)
        }
}

1. watch先监听一下input的值
2. 我们第一次输入, watch的函数开始调用, this.lastTime初始值我设置为0, 故执行if内语句
3. if语句内新建一个setTimeout, 且其返回值(这个值是num, 自己console一下)赋值给this.lastTime
4. 用户开始持续输出时 => watch函数再一次被调用 => 因为this.lastTime不等于0了, 开始进入else语句
5. else语句清除上一次的延迟函数, 再新建一个延迟函数

ajax input return settimeout watch

0 人点赞