函数节流(throttle)和防抖(debounce)

最新推荐文章于 2024-12-28 10:22:06 发布

weixin_30292745

最新推荐文章于 2024-12-28 10:22:06 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

文章标签： c/c++

原文链接：http://www.cnblogs.com/sue7/p/9792805.html

本文详细介绍了JavaScript中的节流和防抖技术，这两种技术能够有效减少DOM操作导致的页面卡顿，通过实例展示了如何使用防抖和节流函数，并讨论了它们在不同场景下的应用，如用户输入验证和鼠标滚动事件的处理。

一、节流和防抖

我们知道过于频繁的dom操作会导致页面卡顿甚至浏览器崩溃，节流和防抖可以用于缓解在某段时间内频繁调用函数带来的压力。

节流：在某段时间内，只允许函数执行一次，随后进入下一个执行周期

防抖：在连续的操作之后过一段时间才会执行一次函数

二、函数实现

1、防抖debounce

 1 function debounce(fun, delay){
 2   let timer;
 3   return function(){
 4     let context = this;
 5     let args = arguments;
 6     clearTimeout(timer);
 7     timer = setTimeout (()=>{
 8         fun.apply(context,args);      
 9 },delay)
10 }    
11 }

2、节流throttle

 1 function throttle(fun, delay, mustRunDelay){
 2    let timer = null
 3    let start
 4    return function(){
 5      let context = this
 6      let args = arguments
 7      let now = new Date().getTime()
 8      clearTimeout(timer)
 9      if(!start){
10        start = now;
11      }    
12      if(now - start >= mustRunDelay){
13         fun.apply(context, args)  
14      }else{
15         timer = setTimeout(()=>{
16             fun.apply(context, args)
17         },delay)
18      }
19    }              
20 }