简单封装去抖和节流

ayuuo

于 2021-06-23 22:07:38 发布

阅读量77

点赞数 1

文章标签： javascript 面试

本文链接：https://blog.youkuaiyun.com/u1873798/article/details/118163400

版权

本文深入探讨了JavaScript中的两种性能优化技术——去抖(debounce)和节流(throttle)。去抖常用于防止频繁触发的事件处理函数，例如输入搜索框时的实时搜索，而节流则适用于限制执行频率，如滚动事件中的窗口重绘。通过示例代码，阐述了它们的工作原理和实现方式，并展示了在实际场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去抖

// 去抖
var Debouncing = (function(){
	var t = null;
	return function(fn , delay){
		if(t==null){
			t = setTimeout( ()=>{
				t = null
			} , delay)
			fn()
		}	
	}		
})()

节流

// 节流
var Throttling = (function(){
	var t = null;
	return function(fn , delay){
		clearTimeout(t);
		t = setTimeout( () => {
			fn()
		} , delay )
	}
})()

调用

document.onmouseover = function(){
	Throttling(()=>{
		console.log("节流中...")
	} , 500)
}