js中的防抖和节流

最新推荐文章于 2022-12-31 15:39:05 发布

wudunkai

最新推荐文章于 2022-12-31 15:39:05 发布

阅读量107

点赞数 1

分类专栏：其他文章标签： javascript 前端

本文链接：https://blog.csdn.net/wudunkai/article/details/115328486

版权

其他专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术常用于优化高频触发的事件处理，如input输入和scroll滚动。防抖能确保在用户停止操作后才执行函数，而节流则限制了执行频率，每隔一定时间执行一次。通过示例代码展示了如何实现防抖和节流函数，并应用到实际场景中，如input事件的处理和窗口resize事件监听。

摘要由CSDN通过智能技术生成

js中的防抖和节流

基本概念

防抖：将多次执行变为最后一次执行。
节流：将多次执行变为每隔一段时间执行。
都是防止某一时间内频繁触发

主要使用场景

防抖：input
节流：scroll

基本代码

防抖代码：

function debounce(fn, t){
	let delay = t || 500;
	//创建一个标记用来存放定时器的返回值
	let time = null; 
	return (...args)=>{
		// 每当用户输入的时候把前一个 setTimeout clear 掉 
		if(time) clearTimeout(time); 
		// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
		time = setTimeout(() => {
			fn.call(this, args);
		}, delay)
	}
}
//处理函数
function Top(){
　　console.log('防抖'+new Date());
}
// 滚动事件
window.addEventListener('scroll', debounce(Top, 1000));

节流代码：

function throttle(fn,t) {
	let delay = 500 || t;
    let time,last; // 通过闭包保存一个标记
    return (...args)=> {
        let now = +new Date()
   	 	// 将多次执行变为每隔一段时间执行
        if(last && now < last + delay){
        	clearTimeout(time)
        	time = setTimeout(()=>{
        		last = now
        		fn.apply(this,args)
        	},delay)
        }else{
        	last = now
        	fn.apply(this,args)
        }
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));