今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟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. Android、JavaScript、WebView之间的交互学习

    一.WebView调用Java //1.允许WebView加载jsmWebView.getSettings().setJavaScriptEnabled(true); //2.编写js的接口 ---- ...

  2. Delphi - 子窗体继承父窗体后如何显示父窗体上的控件

    1.创建子窗体Form1 File -> New -> Form,新建一个form,在form的单元文件中修改 2.子窗体中引用父窗体单元 uses TFatherForm 3.将子窗体中 ...

  3. bootstrap教程,SQL

    版权声明:未经博主允许不得转载 SQL DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言 DML SELECT INSERT UPDATE DELETE Join从句 J ...

  4. 分布式控制系统Git学习

    git : n. 饭桶,无用的人 github : n. 社交编程及代码托管网站 hub: n. 中心:毂:木片 Git是一个分布式版本控制软件,最初由林纳斯·托瓦兹(Linus Torvalds)创 ...

  5. 用Nginx搭建IIS集群实现负载均衡

    长话短说,我们用Nginx来搭建一个简单的集群,实现Web应用的负载均衡,架构图如下: 两台Web服务器,一台静态资源服务器,因为是演示,我们以网站形式部署在本机IIS中 一台Nginx代理服务器,安 ...

  6. 华硕FX503V 安装ubuntu遇到问题解决

    关机进bios,确保secure boot是关闭的,第一启动项设为带有uefi 的U盘,也就是ubuntu安装盘,F10保存退出; 接下来会进入grub界面,选择install ubuntu,不要按e ...

  7. linux中一些简便的命令之cut

    提中的这些命令都是些小命令,很简便,在工作过程中经常使用,具体使用方法如下: cut 使用说明:一般是把某个整齐的文档输出其中某列使用 常用的参数有: -f 选择打印的列 -d 指定定界符(默认定界符 ...

  8. JavaScript “跑马灯”抽奖活动代码解析与优化(二)

    既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.J ...

  9. C# 常用验证

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  10. 西门子PLC-1200 SCL语言开发学习笔记 (一)

    一.简介和背景 PLC一般使用梯形图开发,但是梯形图适合电工使用而不是程序员使用,对我们来说开发困难,门槛高,幸好PLC的开发标准还带了类pascal的高级语言,在西门子这里叫SCL语言,这对于我们程 ...