JS闭包的深入理解---函数节流（详解3）

有了上两篇关于闭包的理解，我们就可以用闭包来实现一些功能。
而函数节流就是一个很经典的例子：

首先我们来解释一下什么是函数节流：

一次函数执行后，只有大于设定的执行周期才执行第2次。
有个需要频繁触发的函数，处于优化的性能考虑，在规定时间内，只让函数触发第一次生效，后面的不生效。

意思就是，比如有个按钮，你kuku一直点，我设置成两秒内只有第一次生效，后面的不会生效，哎这就是函数节流。

我先用传统的方法实现一下：
首先有一个按钮，再来一个方法：

    var f1 = function () {console.log(Date.now());}

我想让这个按钮的点击事件就是这个，并且加上函数节流的效果：

 //原始方法var startTime = 0;function throttle1(fn,delay) {var nowTime = Date.now();if(nowTime-startTime>delay) {fn();startTime = nowTime;}}

然后再加上个绑定事件：

    btn1.onclick = function () {throttle1(f1,1000);};

OK，这样的话这个效果就已经实现了，但是我们想一下，我是想给这个按钮绑定一个事件，但这个事件的实现，却要依靠于一个全局变量startTime。

也就是我们并没有做到封装一个方法来实现出这个效果。
这个时候，我们首先能想到的就是闭包！

闭包可以把这个全局变量写成外层函数的变量，然后在内层函数中实现出节流的效果。
OK，现在我们来实现一下：

//函数节流(闭包 )function throttle2(fn,delay){var startTime = 0;return function () {var nowTime = Date.now();if (nowTime - startTime > delay) {fn.call(this);}startTime = nowTime;}}btn2.onclick = throttle2(f1,1000);

这样我们就把strartTime这个变量塞到了方法体内，这样就很大的减少了全局污染，而且！这是真正的封装了一个方法啊。

而且throttle2的返回值就是一个方法，不会直接调用，可以直接绑定事件，就不用再像刚才那样得放在一个方法体中了。
并且可以很简单的通过call方法来改变this的指向。

OK，这就是通过闭包来实现出函数节流！
END。

JS闭包的深入理解---函数节流（详解3）相关推荐

js onscroll android,JavaScript触发onScroll事件的函数节流详解
问题描述常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在M ...
java调用js匿名函数参数,js匿名函数作为函数参数详解
由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的 ...
javaScript函数模块详解
javaScript函数模块详解函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,和其他引用类型一样可以将函数名想象成指针,函数想象成对象注意, ...
jQuery.extend 函数使用详解
jQuery.extend 函数使用详解一.总结一句话总结: jquery $.extend的作用就是:用于将一个或多个对象的内容合并到目标对象:$.extend( target [, objec ...
python中mat函数_Python中flatten( )函数及函数用法详解
flatten()函数用法 flatten是numpy.ndarray.flatten的一个函数,即返回一个一维数组. flatten只能适用于numpy对象,即array或者mat,普通的list列 ...
ioctl 函数参数详解
2019独角兽企业重金招聘Python工程师标准>>> ioctl 函数参数详解 2009-04-24 11:55 ioctl函数本函数影响由fd参数引用的一个打开的文件. # ...
python getopt_python 5种 statsPython中的getopt函数使用详解
函数原型: getopt.getopt(args, shortopts, longopts=[]) 参数解释: args:args为需要解析的参数列表.一般使用sys.argv[1:],这样可以过滤掉 ...
python strip和split_python strip() 函数和 split() 函数的详解及实例
python strip() 函数和 split() 函数的详解及实例一直以来都分不清楚strip和split的功能,实际上strip是删除的意思:而split则是分割的意思.因此也表示了这两个功能 ...
[转载] python支持complex吗_Python 内置函数complex详解
参考链接: Python complex() 英文文档: class complex([real[, imag]]) Return a complex number with the value re ...

JS闭包的深入理解---函数节流（详解3）

JS闭包的深入理解---函数节流（详解3）相关推荐

最新文章

热门文章