（前端必会）快速理解节流和防抖

Myth丶恋晨 2023-02-13 03:21 3阅读 0赞

## 1、什么是节流和防抖？ ##

**节流(throttle)**：节流可以控制事件触发的频率，节流就跟小水管一样，如果不加节流的话，水就会哗啦啦啦啦啦啦的流出来，但是一旦加了节流阀，你就可以自己控制水的流速了，加了节流后水可以从哗啦啦啦变成滴答滴答滴答，放到我们的函数事件里面说就是可以让事件触发变慢，比如说事件触发可以让它在每一秒内只触发一次；

**防抖(debounce)**：防抖就是可以限制事件在一定时间内不能多次触发，比如说你疯狂按点击按钮，一顿操作猛如虎，不加防抖的话它也会跟着你疯起来，疯狂执行触发的方法。但是一旦加了防抖，无论你点击多少次，他都只会在你最后一次点击的时候才执行；

function debounce(fn, wait = 50, isDebounce = true){ 
    	if(isDebounce){ 
    	//初始化一个定时器
    		let timer
    		return function() { 
    			//如果timer存在就将其清除
    			if(timer){ 
    			clearTimeout(timer)
    			}
    			//重置timer
    			timer = setTimeout(()=>{ 
    			//将这里的this指向和事件绑定回原方法
    			fn.apply(this,arguments)
    			}, wait)
    		}
    	}else{ 
    		//如果isDebounce为false则返回这里的throttle方法
    		let prev = new Date()
    		return function() { 
    			let now = new Date()
    			/*当下一次事件触发的时间和初始事件触发的时间的差值大于 等待时间时才继续触发新事件 */		   
    			if(now - prev > wait){ 
    			fn.apply(this, arguments)
    			//重置初始触发时间
    			prev = new Date()
    			}
    		}
    	}
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style> body { height: 3000px; } </style>
    <body>
    </body>
    <script> function debounce(fn, wait = 50, isDebounce = true){ if(isDebounce){ let timer return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(this,arguments) }, wait) } }else{ let prev = new Date() return function() { let now = new Date() if(now - prev > wait){ fn.apply(this, arguments) prev = new Date() } } } } //用来测试的函数 function test() { console.log("test") } //我们用页面滚动事件来做测试 //第三个参数为true或者不传参则为防抖方法，传false则为节流方法 window.addEventListener('scroll', debounce(test, 500, true)) </script>
    </html>

## \------------------------------------------------------------------------- ##

原文链接：https://blog.csdn.net/weixin\_43750480/article/details/106072856