大家好，欢迎来到IT知识分享网。
我们知道，js有些事件例如resize，mousemove等是会不间断触发的，例如我们简单的一个scroll事件：
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秒执行一次。
参考：js函数节流
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30163.html
