前端——函数防抖

最新推荐文章于 2025-05-01 12:32:07 发布

五月天差一天

最新推荐文章于 2025-05-01 12:32:07 发布

阅读量327

点赞数

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

本文链接：https://blog.youkuaiyun.com/s707365172/article/details/115681430

版权

jquery 同时被 2 个专栏收录

9 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了如何使用函数防抖技术解决web开发中高频率触发的鼠标滚轮事件，通过定时器实现滚动事件的平滑响应，提升用户体验。

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

前端——函数防抖

晚上在视频学习过程中遇到一个比较高效的方法——函数防抖，就是通过定时器的方法来解决在web开发中如resize事件，mousemove事件和鼠标滚轮事件(jquery.mousewheel)等事件触发频率高的问题，下面主要以鼠标滚轮事件来讲解。

var timer = null;
$(window).mousewheel(function(event,dat){
	clearTimeout(timer); //函数节流的关键
	timer = setTimeout(function(){
		if (dat==-1) {
			$nowscreen++;
		}
		else {
			$nowscreen--;
		}
		if($nowscreen<0){
			$nowscreen=0;
		}
		if($nowscreen>$len-1){
			$nowscreen=$len-1;
		}
		$screen.animate({'top':-$h*$nowscreen},300);
		//document.title = $nowscreen;
		$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
		$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
	},200);
				
})

这是一个整屏滚动案例中的部分js代码，这部分代码主要实现的功能是滑动鼠标滚轮时，屏幕跟着滚动，代码在没有添加执行一次的定时器时，鼠标稍微一滚动，屏幕就像打滑一样出去好几屏，这样太不利于用户的体验了，只能看见第一页和最后一页了。可以通过在触发滚轮事件时添加执行一次的定时器，最关键的是在定时器的前面要添加清除执行一次定时器的语句，目的是为了在鼠标滑动之后只保留最后一次的触发，同时将定时器设置延时一定时间，这样就可以解决鼠标滑动，屏幕切换像飞一样的问题了。