利用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. 在Ubuntu/CentOS/Debian系统下,使用CPU挖Monero (XMR)币

    CentOS7(增加源) yum repolist # 查看yum源列表 yum localinstall http://dl.fedoraproject.org/pub/epel/7/x86_64/ ...

  2. react中根据后台值动态配置

    业务中我们要实现对应的数据是1是男,2是女,这就要根据键来进行动态匹配,通常后台来给你一个1或者2,你来进行匹配,这样的数据一般在表格中比较常见. <Card title="Mock- ...

  3. 关于C的全局变量

    一般来说,不会将全局变量的定义写在头文件中.因为如果多个C源文件都添加了头文件,很容易引起重复定义的问题,这时候一般编译器都会提示.正确的做法是在C源文件中定义一个全局变量,在头文件中加入全局变量的声 ...

  4. Leetcode-35.搜索插入位置

    题目描述: 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6 ...

  5. 找到多个与名为“Home”的控制器匹配的类型。解决方法

    “/”应用程序中的服务器错误. 找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配 ...

  6. quart-process_bar

    import asyncio import random import aioredis import redis from quart import Quart, request, url_for, ...

  7. HTTP协议详解(四)

    接着第三篇继续学习.... 9 Cookie和Session的比较 Cookie和Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决HTTP无状态的问题而所做的努力. S ...

  8. java.lang.IllegalStateException: Invalid use of BasicClientConnManager: connection still allocated.

    java.lang.IllegalStateException: Invalid use of BasicClientConnManager: connection still allocated.M ...

  9. MySQL 的安装与使用(一)

    一.Windows 上安装 MySQL 1.Windows 上安装 MySQL 相对来说会较为简单,地那就链接 https://cdn.mysql.com//Downloads/MySQL-8.0/m ...

  10. Eclipse:An error has occurred. See error log for more details. java.lang.NullPointerException

    问题描述   在使用 Eclipse Clean 项目时报错:An error has occurred. See error log for more details. java.lang.Null ...