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);
}),
},
Js闭包应用场合,为vue的watch加上一个延迟器的更多相关文章
- js闭包详解
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...
- 详解js闭包
https://segmentfault.com/a/1190000000652891 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的 ...
- JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变 ...
- [转]详解JS闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...
- js闭包详解-转自好友trigkit4
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...
- 干货分享:让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
- js闭包的作用域以及闭包案列的介绍:
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- 170106、用9种办法解决 JS 闭包经典面试题之 for 循环取 i
闭包 1.正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是 ...
随机推荐
- lillietest 正态分布的拟合优度测试
函数 lillietest格式 H = lillietest(X) %对输入向量X进行Lilliefors测试,显著性水平为0.05.H = lillietest(X,alpha) %在水平alpha ...
- Lombok插件看法浅谈
背景 最近接触的几个工程中Lombok插件出现频率比较高,趁机了解一下原理. 简要说明: 受益于JSR 269 API,程序可以在编译阶段对AST进行节点的操作,从而注入相关的功能结点,从而包含在最终 ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- 51nod 2523
len=0 break len=1,f=0,ans++,保留前一行的v数组,即len不变:f=1,重新确定下一列中需要判哪一行(标记法),跟新v数组 这题思路很清晰,但是写代码的时候弄错好几个变量,列 ...
- Spring 基于注解的AOP实现
在本文开始之前,我要引入一张图,这张图的来源 https://blog.csdn.net/chenyao1994/article/details/79708496 ,版权归原作者所有,我借鉴了原作者的 ...
- Filebeat 启动关闭流程
启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...
- sortable.js 拖拽排序及配置项说明
// 拖动排序 $(function() { /*排序*/ //排序 // Simple list ]; new Sortable(list, { group: "name", a ...
- vertx的Actor模型实现
前言 note: Context 与 EventLoop 关系 : N ; 每次创建一个vericles或者multi instances 通过EventLoopGroup.next挑出一个Event ...
- 微信小程序rich-text 文本首行缩进和图片居中
微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时 ...
- java项目----衣服购买
执行bat文件:注意t_temp.properties保存的文件是否为utf8编码native2ascii -encoding UTF-8 t_temp.properties r.properties ...