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

 

posted @ 2018-11-12 23:45  鸡毛巾  阅读(3670)  评论(0编辑  收藏  举报