利用vue的watch可以很简单的监听数据变化
而watch来侦听数据继而调用业务逻辑是一种十分常见的模式
最典型的就是自动搜索功能,如下图,这里我们用watch侦听被双向绑定的input值,而后触发后端请求获取数据
但是显然如果不加任何处理的话,没输入一次字符都会请求一个接口。为了解决这个问题必须在watch上面加上一个延迟器。
延迟器必须内部有一个定时器来标记重入,js没有类似c那样的局部静态变量,所以我使用闭包来实现。
不说废话,直接上代码
function delayer (action, delay = 600) {
let timer = -1;
return nv => {
clearTimeout(timer);
timer = setTimeout(() => {
action(nv);
}, delay);
};
}
watch
watch: {
searchWord: delayer(nv => {
console.log(nv);
}),
},