今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟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的防抖,节流,柯里化和反柯里化的更多相关文章

  1. JS 函数的柯里化与反柯里化

    ===================================== 函数的柯里化与反柯里化 ===================================== [这是一篇比较久之前的总 ...

  2. js高阶函数应用—函数柯里化和反柯里化(二)

    第上一篇文章中我们介绍了函数柯里化,顺带提到了偏函数,接下来我们继续话题,进入今天的主题-函数的反柯里化. 在上一篇文章中柯里化函数你可能需要去敲许多代码,理解很多代码逻辑,不过这一节我们讨论的反科里 ...

  3. js高阶函数应用—函数柯里化和反柯里化

    在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...

  4. 简单粗暴详细讲解javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

  5. JavaScript中的函数柯里化与反柯里化

    一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...

  6. JS中的柯里化与反柯里化

    先占个位 看了一天折资料,感觉清楚多了

  7. 前端开发者进阶之函数反柯里化unCurrying

    函数柯里化,是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数. 那么反柯里化函数,从字面讲,意义和用法跟函数柯里化相比正好相反,扩大适用 ...

  8. JS中的反柯里化( uncurrying)

    反柯里化 相反,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用.即把如下给定的函数签名, obj.func(arg1, arg2) 转化成一个函数形式,签名 ...

  9. JavaScript 反柯里化

    浅析 JavaScript 中的 函数 uncurrying 反柯里化 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间 ...

随机推荐

  1. word文档的python解析

    主要两块,第一个是文件类型的转换,第二个是用docx包去对word文档中的table进行parse 1. 文件格式装换 因为很多各种各样的原因,至今还有一些word文档是doc的格式存的,对于这种,如 ...

  2. PHP 生成验证码(+图片没有显示的解决办法)

    今天有需要用到验证码,就敲了个,毕竟用途比较广,所以打算把代码留下来,以后肯定用得上的.当然,今天在做的时候也是有一些问题的,分享出来吧,记录自己所犯的错误,避免以后再掉坑里. 先给个效果图(下面的真 ...

  3. js中的行为委托和无类编程

    概述 <你不知道的JavaScript>中有这么一段话:不幸的是,将类和继承的设计模式思维带入Javascript的想法是你所做的最坏的事情,因为语法可能会让你迷惑不已,让你以为真的有类这 ...

  4. Java学习笔记36(File类)

    File类可以对操作系统中的文件进行操作: File类的静态成员变量: package demo; import java.io.File; public class FileDemo { publi ...

  5. LabVIEW(十):数组和簇

    一.数组 1.创建数组 (1).前面板右键>“数组.矩阵与簇”>数组. (2).前面板右键>(选择要添加的数组数据类型,比如创建数值数组)数值>将“数值输入控件”拖入数组中. ...

  6. Zabbix--1

    ZABBIX 与其他监控程序比较.

  7. javascript 最全面的数组操作合集

    一.数组添加.删除.替换.截取操作 1.arr.unshift(1) 在数组头部添加一个元素 1 (直接改变原数组,返回值为添加元素后数组的length) 2.arr.shift() 在数组的头部删除 ...

  8. web自动化测试(java)---元素定位

    和python类似,java-selenium也提供了很多种元素定位的方法,具体如下: findElement(By.id()) findElement(By.name()) findElement( ...

  9. Eclipse建立Java工程中的三个JRE选项的区别(Use an execution environment JRE,Use a project specific JRE,Use default JRE)

    本博客部分转载自: http://blog.csdn.net/wdjhzw/article/details/42086615  这篇博客写的非常好,很用心. 一.首先看新建Java Project时候 ...

  10. 分布式锁之redisson

    redisson是redis官网推荐的java语言实现分布式锁的项目.当然,redisson远不止分布式锁,还包括其他一些分布式结构.详情请移步:https://github.com/mrniko/r ...