关于js函数去抖

Question

页面很简单，就一个input框

<input type="text" v-model="keyword" @keyup="search($event)">

js：

methods:{
    //键盘按下事件
    search:function(e){
        var timer;
        if(e.keyCode != 32){ //空格
            clearTimeout(timer);
            timer = setTimeout(()=>{
                console.log("这里写交互");
            }, 1000)
        }
    }
}

当我输入“123”时，打印了3次

我想要的效果：
当我输入“123”时，就打印了1次

Answer 1

var timer; 定义在search外边 要不每次触发都新定义了一个timer 就不是上次settime的handle了

Answer 2

因为你的timer每次点击的时候都重新声明了一下，把timer声明放到外部就好了

Answer 3

search:function(e){
        var timer; // 你函数每次触发，都重新声明了timer,也就是说你每次clearTimeout的time是一个undefined，我是这样理解的，把这行注释掉，再看看效果。
        if(e.keyCode != 32){ //空格
            clearTimeout(timer);
            timer = setTimeout(()=>{
                console.log("这里写交互");
            }, 1000)
        }
    }