今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟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. 「SDOI2016」储能表(数位dp)

    「SDOI2016」储能表(数位dp) 神仙数位 \(dp\) 系列 可能我做题做得少 \(QAQ\) \(f[i][0/1][0/1][0/1]\) 表示第 \(i\) 位 \(n\) 是否到达上界 ...

  2. 使用Lucene-Spatial实现集成地理位置的全文检索

    Lucene通过Spatial包提供了对基于地理位置的全文检索的支持,最典型的应用场景就是:“搜索中关村附近1公里内的火锅店,并按远近排序”.使用Lucene-Spatial添加对地理位置的支持,和之 ...

  3. Baidu WebUploader 前端文件上传组件的使用

    简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...

  4. MySQL:字符串字段加索引

    1. 使用方式 1.1 全字段加索引 给整个字段加索引,索引存储整个字段的值. 数据量较小时,查询成本高,准确度高: 数据量较大时,比较耗费空间: 1.2 前缀索引 MySQL支持前缀索引,可以定义字 ...

  5. python多进程没有锁队列范例

    假设有一些任务要完成.为了完成这项任务,将使用几个过程.所以,将保持两个队列.一个包含任务,另一个包含已完成任务的日志. 然后实例化流程来完成任务.请注意,python队列类已经同步. 这意味着,我们 ...

  6. 【PaddlePaddle】自然语言处理:句词预测

    前言 预测词汇的相关性算是自然语言中的HelloWolrd.本文主要根据百度PaddlePaddle示例word2vec,对句子中下一个单词的预测.该示例使用4个词语来预测下一个词. 1. 数据集以及 ...

  7. 个人总结的一个中高级Java开发工程师或架构师需要掌握哪几点!

    今天,我来唠叨几句~~ 知识改变命运,对于Java程序员来说,技术不断更新,只有及时充电,才能不被市场淘汰.今天为大家分享Java程序员学习的6个小技巧. 1.一定要看书 现在学习Java变得比以前容 ...

  8. Xamarin.Android 获取手机IP地址

    命名空间: using System.Net; 代码: IPAddress[] address = Dns.GetHostAddresses(Dns.GetHostName()); ] != null ...

  9. Xamarin.Android 调用手机拍照功能

    最近开发Android遇到了调用本地拍照功能,于是在网上搜了一些方法,加上自己理解的注释,在这儿记录下来省的下次用时候找不到,同事也给正在寻找调用本地拍照功能的小伙伴一些帮助~ 实现思路:首先加载-- ...

  10. android底部菜单栏的编写

    开发工具android stdio,组件Radio Button 1.新建空项目DDDD 2.将事先准备好的图标复制到对应的文件夹中(如图),这五个文件夹都要拷进去,图标文件http://pan.ba ...