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

Js闭包应用场合,为vue的watch加上一个延迟器的更多相关文章

  1. js闭包详解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...

  2. 详解js闭包

    https://segmentfault.com/a/1190000000652891 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的 ...

  3. JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

    补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变 ...

  4. [转]详解JS闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...

  5. js闭包详解-转自好友trigkit4

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...

  6. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  7. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  8. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  9. 170106、用9种办法解决 JS 闭包经典面试题之 for 循环取 i

    闭包 1.正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是 ...

随机推荐

  1. Java中快捷键

    Fond表示字体 size表示字号 IDEA的基本配置 IDEA中常用的快捷键 Intellij IDEA基本快捷键 Ctrl+G 跳转到指定行 Ctrl+F4 关闭当前编辑页面 Ctrl+F 搜索 ...

  2. 【汇编语言】DOXBox 0.74 常用debug命令

    1.查看.修改寄存器(r命令) ①-r ②-r  ax(要修改的寄存器) -:m(输入想要改成什么值) 2.查看内存单元(d命令) ①-d 查看128个内存单元内容. ②-d 段地址:偏移地址 查看指 ...

  3. ueditor接入秀米编辑器

    秀米编辑器用来编辑微信页面很方便,功能也比较强大.秀米提供了第三方编辑器接入的功能,接入方法可以参照官网示例:http://hgs.xiumi.us/uedit/ 但是这里有几点要注意: 1. 示例中 ...

  4. Corn Fields POJ - 3254 (状压dp)

    题目链接: Corn Fields  POJ - 3254 题目大意:给你一个n*m的矩阵,矩阵的元素只包括0和1,0代表当前的位置不能放置人,1代表当前的位置可以放人,当你决定放人的时候,这个人的四 ...

  5. Android logcat lines missing原因分析

    当出现类似如下错误日志时: 2019-04-14 17:51:14.506 10189-10189/com.ss.android.ex.parent D/GGK: no WonderfulVideo ...

  6. 分布式系列十一: Redis进阶

    分布式锁 数据库 数据库是使用唯一索引不允许重复的特性(或自定义实现如乐观锁). 但持有锁的进程如果释放锁时异常则容易导致死锁. zookeeper 使用临时节点, watcher可以获得节点被删除的 ...

  7. python封装configparser模块获取conf.ini值

    configparser模块是python自带的从文件中获取固定格式参数的模块,因为是python只带的,大家用的应该很多,我觉得这个参数模块比较灵活,添加参数.修改参数.读取参数等都有对应的参数供用 ...

  8. pyspider

    Linux系统我使用CentOS.对于pycurl安装问题比较好解决,只需要先安装对应的开发包即可.执行如下命令: yum install python-devel curl-devel 分别安装py ...

  9. form表单老忘的

    禁止拉伸 textarea{ resize:none; } 左侧 label 对齐注意事项 必须要和 label-width 共同使用,才会生效. 表单域标签的宽度,直接写入 Form, 子元素 fo ...

  10. Navicat之MySQL连接(二)

    1.下载Navicat软件包及相应的破解补丁: 2.双击navicat120_premium_cs_x64.exe开始安装,修改安装位置,一般选择安装在非系统盘! 注意:安装完成后,解压破解补丁文件拷 ...