js函数节流
2016-03-26 15:42
513 查看
我们知道,js有些事件例如resize,mousemove等是会不间断触发的,例如我们简单的一个scroll事件:
我们需要在滚动的时候去做一些事情,如上图可见,我们只是简单的console,在一次滚动过程中函数即执行了将近20次,如果这个函数有更为复杂的方法,比如操作dom或者其他交互,会严重影响性能。为了避免这个问题,我们一般会使用定时器来对函数进行节流。
函数节流的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。
在javascript高级程序设计中,定义了一个方法,如下:
throttle函数接收两个参数,即要执行的函数及执行环境,如果执行环境未定义,默认则为windows。在这个函数中,会在第一次执行时为method顶一个定时器属性,在指定时间间隔(300)内再次执行时会清楚上一次定义的定时器并创建新定时器知道停止。
网上还有一种解决方案:
调用结果和第一种结果相同,都能有效的阻止函数重复调用,不同的是,第一种将定时器设置为函数的一个属性,而第二种方案通过闭包来实现。首先在函数内定义一个变量timer,然后返回一个函数,我们知道由于在返回函数中包含对timer的引用,因此timer并不会立即被清除。(我们也可以将timer定义为全局变量)。
以上两种方案存在一个问题,即如果事件一直触发,那么函数将永远不会被执行,这在某些时候并不符合我们的需求,可能我们只是想在规定时间内减少函数执行次数,所以对以上函数做如下改进:
我们在初始的时候定义一个begin开始时间,当时间间隔超过duration时,则执行一次函数,这样我们做到了不重复调用,又能保证500秒执行一次。
参考:/article/4780229.html
function scrollFn(){ console.log(1) } window.onscroll=scrollFn
我们需要在滚动的时候去做一些事情,如上图可见,我们只是简单的console,在一次滚动过程中函数即执行了将近20次,如果这个函数有更为复杂的方法,比如操作dom或者其他交互,会严重影响性能。为了避免这个问题,我们一般会使用定时器来对函数进行节流。
函数节流的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。
在javascript高级程序设计中,定义了一个方法,如下:
function throttle(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context) },300) }
throttle函数接收两个参数,即要执行的函数及执行环境,如果执行环境未定义,默认则为windows。在这个函数中,会在第一次执行时为method顶一个定时器属性,在指定时间间隔(300)内再次执行时会清楚上一次定义的定时器并创建新定时器知道停止。
function scrollFn(){
console.log(1)
}
function throttle(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context) },300) }
window.onscroll=function(){
throttle(scrollFn)
}
网上还有一种解决方案:
function throttle(method,delay){ var timer=null; return function(){ var context=this, args=arguments; clearTimeout(timer); timer=setTimeout(function(){ method.apply(context,args); },delay); } }
调用结果和第一种结果相同,都能有效的阻止函数重复调用,不同的是,第一种将定时器设置为函数的一个属性,而第二种方案通过闭包来实现。首先在函数内定义一个变量timer,然后返回一个函数,我们知道由于在返回函数中包含对timer的引用,因此timer并不会立即被清除。(我们也可以将timer定义为全局变量)。
以上两种方案存在一个问题,即如果事件一直触发,那么函数将永远不会被执行,这在某些时候并不符合我们的需求,可能我们只是想在规定时间内减少函数执行次数,所以对以上函数做如下改进:
function scrollFn(){ console.log(1) } function throttle(method,delay,duration){ var timer=null; var begin=new Date(); return function(){ var context=this, args=arguments; var current=new Date(); clearTimeout(timer); if(current-begin>=duration){ method.apply(context,args); begin=current; }else{ timer=setTimeout(function(){ method.apply(context,args); },delay); } } } window.onscroll=throttle(scrollFn,100,500)
我们在初始的时候定义一个begin开始时间,当时间间隔超过duration时,则执行一次函数,这样我们做到了不重复调用,又能保证500秒执行一次。
参考:/article/4780229.html
相关文章推荐
- js-全局变量与局部变量
- JS实现滚动监听以及滑动到顶部
- podspec转podspec.json
- 小议json与数组的区别
- 笔记-JS中常见的数据运算
- JS魔法堂:从void 0 === undefined说起
- js闭包
- JavaScript arguments对象
- jsp中java代码、jsp代码、js代码执行的顺序
- JSP
- js中设置显示和隐藏
- js中this指向总结
- js删除数组里的某个元素
- JavaScript语法基础
- 关于jsp与servlet作用域
- js note
- javascript Date format(js日期格式化)
- VC与JavaScript交互(三) ———— JS调用C++
- 纯JS省市区三级联动
- webapi返回json格式优化