JavaScript函数节流和函数去抖知识点学习 - 行业资讯 - 肥雀云

概念
　　

节流(节流阀)让一个函数不要执行的太频繁,减少执行过快的调用,叫节流

去抖(防反跳)去抖就是对于一定时间段的连续的函数调用,只让其执行一次

<强>油门应用场景
　　

<>强防反跳应用场景
　　

每次调整/滚动触发统计事件
　　

文本输入的验证(连续输入文字后发送AJAX请求进行验证,验证一次就好)
　　

函数去抖的实现
　　

我们以滚动事件为例,探究如何是实现滚动一次窗口打印一个hello world字符串。如果不对其节流或者去抖:

　　　　　　窗口。onscroll=function () { 　　控制台。日志(“hello world”); 　　} 　　　　

这样每滚动一次,实际上会打印多个hello world。函数去抖背后的思路是指,某些代码不可能在没有间断的情况下连续执行。创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

《高程三》给出了最简洁最经典的去抖代码,如下:

　　　　　　函数防反跳(方法,上下文){ 　　clearTimeout (method.tId); 　　方法。tId=setTimeout(函数(){ 　　method.call(上下文); 　　},1000); 　　} 　　　　函数打印(){ 　　控制台。日志(“hello world”); 　　} 　　　　窗口。onscroll=function () { 　　防反跳(打印); 　　}; 　　　　

再做一些改动

　　　　　　函数防反跳(延迟,行动){ 　　var tId; 　　返回函数(){ 　　var=背景; 　　arg var=参数; 　　如果(tId) clearTimeout (tId); 　　tId=setTimeout(函数(){ 　　行动。应用(上下文,arg); 　　},延迟); 　　} 　　} 　　　　窗口。onscroll=防反跳(1000,印刷); 　　　　

函数节流的实现
　　

函数节流就是让连续执行的函数,变为固定时间段间断地执行。大概有两种方式实现。

其一使用时间戳来判断是否已经到回调执行时间,记录上次执行的时间戳,然后每次触发事件时执行回调,回调中判断当前时间戳距离上次执行时间戳的时间间隔是否有*年代,如果是,则执行,并更新上次执行的时间戳,如此循环。

　　　　　　var节流=函数(延迟,行动){ 　　var=0; 　　返回函数(){ 　　var咕咕叫=new日期(); 　　如果(咕咕叫,最后在延迟){ 　　行动。应用(这个参数); 　　去年=咕咕叫; 　　} 　　} 　　} 　　　　

第二种方法是使用定时器,比如,当滚动事件刚触发时,打印一个hello world,然后设置一个1000 ms的定时器,此后每次触发滚动事件、触发回调,如果已经存在定时器,则回调不执行方法,知道定时器出发,处理程序被清除,然后重新设置定时器。

　　　　　　var节流=函数(延迟,行动){ 　　var超时; 　　后来var=function () { 　　timeout=setTimeout(函数(){ 　　clearTimeout(超时);//解除引用　　超时=零; 　　},延迟); 　　}; 　　后(); 　　如果超时(!){ 　　行动。应用(这个参数); 　　后(); 　　} 　　} 　　　　

更新方法:

　　　　　　函数throttlePro(延迟,行动){ 　　var tId; 　　返回函数(){ 　　var=背景; 　　arg var=参数; 　　如果(tId)返回; 　　tId=setTimeout(函数(){ 　　行动。应用(上下文,arg); 　　clearTimeout (tId);//setTimeout返回一个整数,clearTimeout之后,tId还是那个整数,setInterval同样如此　　tId=零; 　　},延迟); 　　} 　　} 　　　　