利用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. python和Java的几种容器比较

    python里面有几种常用的容器用来存放数据 1.list 列表,在python中没有数据类型,所以可以在列表中存放各种类型的数据,比如把Java里面的整型和字符串放在一个容器里面如下所示 list ...

  2. windows安装解压版mysql

    记录下用批处理安装mysql5.7.18的过程与踩到的坑 先在安装目录新建文件my.ini [mysql] default-character-set=utf8 basedir=TODO datadi ...

  3. word20170107当地交通 Local transportation有用的词和句子

    有用的词: transportation: 交通 airport express: 机场快线 shuttle bus: 班车 taxi/cab: 出租车 meter: 打表 limousine:专车. ...

  4. Spring Cloud Commons模块

    上一篇介绍了 Spring Cloud Context模块 ,本文介绍SpringCloud的另一个基础模块 SpringCloud Commons模块 .只要在项目的pom文件中引入了spring- ...

  5. Django-CSRF,AJAX,FORM

    内容总览1.CSRF相关1>CSRF源码分析2>ajax的实现(ajax的实例(异步计算,参数测试,上传))3>ajax通过csrf的校验 2.FORM组件1>基本使用2> ...

  6. hikey960编译记录

    arm64内核编译命令: 1 make ARCH=arm64 hikey960-defconfig 2 make ARCH=arm64 CROSS_COMPILE=aarch64-linux-gnu- ...

  7. WPF 10天修炼 第六天- 系统属性和常用控件

    WPF系统属性和常用控件 渐变的背景色 WPF中的前景色和背景色不同于传统Winform的设置,这些属性都是Brush类型的值.在XAML中,当为这些属性设置指定的颜色后将被转换为SolidColor ...

  8. gitignore规则探究

    PS:转自https://blog.csdn.net/o07sai/article/details/81043474 网上有好多gitignore的帖子,文章,都说很简单的.但是我怎么就用不好呢? 我 ...

  9. Typescript---03 类、接口、枚举

    传统的javascript程序使用函数和基于原型的继承来创建可重用的组件,从ECMAScript2015(ECMAScript 6)开始,可以使用基于类的面向对象方式. 一.类: 定义类(class) ...

  10. 2018-2019-2 20165323《网络攻防技术》Exp5 MSF基础应用

    一.知识点总结 1.MSF攻击方法 主动攻击:扫描主机漏洞,进行攻击 攻击浏览器 攻击其他客户端 2.MSF的六种模块 渗透攻击模块Exploit Modules:攻击漏洞,把shellcode&qu ...