JS的防抖,节流,柯里化和反柯里化
今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟wc,有点高大上啊。事实上,我们可以在不经意间用过他们但是你却不知道他们叫什么,没关系,相信看了今天的文章你会有一些收获的
节流
首先我们来搞一下节流,啥叫节流,就是将高频率触发事件变成低频率触发事件,举个简单的例子,但我们用window.onscroll滚动事件的时候你会发现滚轮滑动一次可能会触发好多次事件,
代码:
window.onscroll = function(){
console.log("触发")
}
结果:

我只是稍微滑动了一下子而已,就触发了十次,这个触发次数实在是过于频繁,那我们有没有什么方法来解决这个问题呢?
思路:我们可以给一个开关,用定时器控制开关的变化,只有当开关打开时我们才去触发打印。
核心代码:
var bStop = true;
window.onscroll = function() {
if(!bStop){
return;
}
bStop = false;
setTimeout(()=>{
var t = document.documentElement.scrollTop || document.body.scrollTop;
console.log(t);
bStop = true;
},300)
}
原谅我直接给你们把代码放上来了,你们就不用一句一句打了,直接拉下代码去就可以run了,美滋滋啊
适用场景:1.onscroll()
2.onresize()
3.oninput()事件等等
防抖
现在我们再来看一看防抖,简单来说,防抖就是不关心中间过程,只关心最后的结果
例如在滚动时,我们需要获取滚动结束时的位置,此时我们并不关心滚动过程中发生了什么,而仅仅只是想知道结束那一刻的状态,那这个时候我们就可以用到防抖
思路:在执行函数时先清除一个延时器,之后再创建一个延时器,这样每次函数触发都会将上一个延时器清除并且建立下一个延时器,中间过程的延时器根本不会被触发,因为他刚创建好就被清除了, 只有最后一个延时器,由于没有人来清除他,所以他会正常执行。
可能我说的不是很透彻,没关系,让我直接上代码好吧,代码还是很简洁清晰的
核心代码:
var timer = null;
window.onscroll = function(){
if(timer){
clearTimeout(timer);
} timer = setTimeout(()=>{
var t = document.documentElement.scrollTop || document.body.scrollTop;
console.log(t);
},300)
}
柯里化
接着我们来搞一搞柯里化好吧,柯里化是指将使用多个参数的函数转换成一系列使用一个参数的函数的技术(又称为部分求值),
目的:为了缩小适用范围,创建一个针对性更强的函数
特点:1.提高了代码的合理性,更重的它突出一种思想---降低适用范围,提高针对性。
2.对于一个已有函数,对其约定好其中的某些参数输入,然后生成一个更有好的、更符合业务逻辑的函数。好处:1.提高针对性
2.延迟执行(只有在最后一次才执行)
3.固定易变因素
现在我们直接上一个小小的例子,有一个厨师,要做饭,但是他的手下没有把菜买齐,这样,买一份原料,放在厨师厨房,再买一份,放在厨师厨房,等买齐了,叫厨师过来,好了,原料齐了,可以做饭了。这个时候,厨师利用原料,把饭做好。厨师就像一个函数,他有自己的功能(做饭),但是参数(原料)不齐,每次执行这个函数,在参数不齐的情况下,只能返回一个新的函数,这个新的函数已经内置了之前的参数,当参数齐了之后完成他本身的功能。
举一个柯里化的小栗子,假设现在我们要按照柯里化的思想实现 add(1,2,3)(1)(2)(3)(4,5,6)(7,8)() 对里面所有的参数求和
直接上代码好吧
// add 函数柯里化
function add(){
//建立args,利用闭包特性,不断保存arguments
var args = [].slice.call(arguments);
//方法一,新建_add函数实现柯里化
var _add = function(){
if(arguments.length === 0){
//参数为空,对args执行加法
return args.reduce(function(a,b){return a+b});
}else {
//否则,保存参数到args,返回一个函数
[].push.apply(args,arguments);
return _add;
}
}
//返回_add函数
return _add;
思想:1.当参数的长度不为0时,存储参数,
2.当参数的长度为零时,计算所有参数的和
反柯里化
作用:在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用.
对反柯里化更通俗的解释可以是 函数的借用,是函数能够接受处理其他对象,通过借用泛化、扩大了函数的使用范围。
下面放一个通用的柯里化函数:
var uncurrying= function (fn) {
return function () {
var args=[].slice.call(arguments,1);
return fn.apply(arguments[0],args);
}
};
以上内容由本人的一些体会和参考了网上一些大佬们的意见或文章写成,仍有不足之处,请各位见谅,有问题请指出
JS的防抖,节流,柯里化和反柯里化的更多相关文章
- JS 函数的柯里化与反柯里化
===================================== 函数的柯里化与反柯里化 ===================================== [这是一篇比较久之前的总 ...
- js高阶函数应用—函数柯里化和反柯里化(二)
第上一篇文章中我们介绍了函数柯里化,顺带提到了偏函数,接下来我们继续话题,进入今天的主题-函数的反柯里化. 在上一篇文章中柯里化函数你可能需要去敲许多代码,理解很多代码逻辑,不过这一节我们讨论的反科里 ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
- 简单粗暴详细讲解javascript实现函数柯里化与反柯里化
函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...
- JavaScript中的函数柯里化与反柯里化
一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...
- JS中的柯里化与反柯里化
先占个位 看了一天折资料,感觉清楚多了
- 前端开发者进阶之函数反柯里化unCurrying
函数柯里化,是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数. 那么反柯里化函数,从字面讲,意义和用法跟函数柯里化相比正好相反,扩大适用 ...
- JS中的反柯里化( uncurrying)
反柯里化 相反,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用.即把如下给定的函数签名, obj.func(arg1, arg2) 转化成一个函数形式,签名 ...
- JavaScript 反柯里化
浅析 JavaScript 中的 函数 uncurrying 反柯里化 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间 ...
随机推荐
- 小试 boost spirit
解释文本文件是日常编程中太平常的一件事情了,一般来说,土鳖点的做法可以直接手写 parser 用循环暴力地去 map 文本上的关键字从而提取相关信息,想省力一点则可以使用 tokenizer 或正则表 ...
- TextView展示富文本时emoj或图片和文字不对齐的解决方案
在项目中,回复框.聊天界面的显示往往会有emoj或者图片,但是一个比较头疼的问题是,会出现emoj表情或者图片和文字的位置不对齐,总是有偏移,这样很影响用户体验的.下面会总结一下如何解决这个问题. 本 ...
- mybatis 控制台打印sql语句
其实很简单,打印SQL只需要加一个setting就可以了.亲测可用. mybatis-config.xml: <settings> <setting name=&quo ...
- 使用new Image()进行预加载
概述 这篇博文记录了用new Image()进行预加载的总结,供以后开发时参考,相信对其他人也有用. 旧的预加载 一般我们为了让背景图更快的加载,我们常常把背景图放在一个display:none的im ...
- typescript handbook 学习笔记3
概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...
- C#6.0语言规范(一) 介绍
C#(发音为“See Sharp”)是一种简单,现代,面向对象,类型安全的编程语言.C#源于C语言系列,对C,C ++和Java程序员来说很熟悉.EC#International将EC#标准化为ECM ...
- openresty + lua 1、openresty 连接 mysql,实现 crud
最近开发一个项目,公司使用的是 openresty + lua,所以就研究了 openresty + lua.介绍的话,我就不多说了,网上太多了. 写这个博客主要是记录一下,在学习的过程中遇到的一些坑 ...
- keepalived-1
keepalived所执行的外部脚本命令建议使用绝对路径 vrrp 广播 keepalived的主要功能 1,管理LVS负载均衡软件 2,对LVS集群节点健康检查功能.Healthcheck 3,
- linux下的初始化系统systemd简科普
systemd是什么?名字很奇怪,不认识. 扒一扒wiki,你就会知道我是谁了? 在下有眼不识泰山,原来你就是盘古老爷爷用的开天辟地大斧头啊. 贫穷不可怕,可怕的是贫穷限制了你的想象--------- ...
- 卖给高通之后的CSR的现状和未来
转眼之间,CSR已经嫁给高通两年了,养在深宫大院大小妾的CSR,到底过的怎么样呢? 从高通官网上查看的结果显示,CSR产品被分成了三类: A 传统的用在耳机音响的CSR86XX系列,这部分改动不大,就 ...