Js闭包应用场合，为vue的watch加上一个延迟器

利用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);
    }),
},

 

转载于:https://www.cnblogs.com/jimaojin/p/9949965.html