js原生实现防抖节流

最新推荐文章于 2025-06-09 23:11:46 发布

yumihe

最新推荐文章于 2025-06-09 23:11:46 发布

阅读量8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_32678401/article/details/108519597

js 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨了JavaScript中防抖(debounce)与节流(throttle)的技术原理及实现方式，对比了两者在处理高频触发事件时的区别，如input监听，并提供了具体的代码示例。

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

共同点：都用到了setTimeout定时器，都是在指定时间间隔后执行函数，都是为了解决数据时时变化而时时请求导致性能差的问题

区别：防抖在指定时间间隔里再次调用函数，会清除定时器，重新计时，直到在最新的计时时间间隔里没有调用函数，才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数，不会清除定时器而重新计时

防抖缺点：当用户在指定时间间隔里一直操作，那么setTimeout里的函数永远不会执行

节流缺点：如果用户一直操作，那么setimeout里的函数会在指定时间间隔后都会执行一次，如此反复

以监听input的值举例：

// 防抖
var input = document.getElementById('input')
input.addEventListener('input', debounce(handle, 1000))
function debounce(fn,delay){
	var timer
	return function(...args){
		if(timer){
			clearTimeout(timer)
		}
		timer = setTimeout(()=>{
			fn.apply(this,args)
		}, delay)
	}
}
function handle(e){
	console.log(e.target.value)
}

// 节流
var input = document.getElementById('input')
input.addEventListener('input', throttle(handle, 200))
function throttle(fn,delay){
	let timer
	let flag = true
	return function(...args){
		if(!flag){
			return
		}
		flag = false
		timer = setTimeout(()=>{
			fn.apply(this,args)
			flag = true
		},delay)
	}
}
function handle(e){
	console.log(e.target.value)
}