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 反柯里化 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间 ...
随机推荐
- 一篇入门 -- Git
一. Git 介绍 Git作为一款分布式的==版本控制==工具,作为一名程序员,是必须要掌握的. 最初由林纳斯·托瓦兹(Linus Torvalds)创作,于2005年以GPL发布.最初目的是为更好地 ...
- 《Opencv 3 计算机视觉 python语言实现》· 第二遍 —— 读后笔记
概览 代码实战 https://github.com/xinghalo/ml-in-action/tree/master/book-opencv
- 算法入门:最大子序列和的四种算法(Java)
最近再学习算法和数据结构,推荐一本书:Data structures and Algorithm analysis in Java 3rd 以下的四种算法出自本书 四种最大子序列和的算法: 问题描述 ...
- Java学习笔记43(打印流、IO流工具类简单介绍)
打印流: 有两个类:PrintStream,PrintWriter类,两个类的方法一致,区别在于构造器 PrintStream:构造方法:接收File类型,接收字符串文件名,接收字节输出流(Outpu ...
- sublime text 3中安装ctags支持函数跳转,安装convertToUtf8支持中文步骤[工具篇]
sublime text x是个很不错的编辑器,但是各种插件都需要自己安装,有时也有点不方便,尤其是自己还不不知道怎么安装的时候.开发中经常用到的,函数跳转,就是一个比较难安装的东西,记录如下(系统为 ...
- 精通Linux
1, linux 启动流程,详细 2,grub , grub2 3, 文件系统,不同文件系统的特性 ext3 , ext 4 ,xfs 4, 不同目录的作用, 分区 5,用户管理 6,文件权限,目录挂 ...
- Spring Boot 单元测试详解+实战教程
Spring Boot 的测试类库 Spring Boot 提供了许多实用工具和注解来帮助测试应用程序,主要包括以下两个模块. spring-boot-test:支持测试的核心内容. spring-b ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- Django -- 部署Django 静态文件不能获取
# 在部署上下之后无法正常显示后台admin的静态文件 # 因为文件都在django内部,而在nginx中将配置都设置到一个位置: # 措施: 1.在settings.py文件中添加配置; STATI ...
- 使用 JRebel 进行远程热部署
JRebel支持热部署,和远程热部署,本文我们来搭建一下远程热部署. 一.服务器安装 JRebel 1.官网下载最新的 JRebel 安装包,下载链接:https://zeroturnaround.c ...