前端——函数防抖

前端——函数防抖

晚上在视频学习过程中遇到一个比较高效的方法——函数防抖，就是通过定时器的方法来解决在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代码，这部分代码主要实现的功能是滑动鼠标滚轮时，屏幕跟着滚动，代码在没有添加执行一次的定时器时，鼠标稍微一滚动，屏幕就像打滑一样出去好几屏，这样太不利于用户的体验了，只能看见第一页和最后一页了。可以通过在触发滚轮事件时添加执行一次的定时器，最关键的是在定时器的前面要添加清除执行一次定时器的语句，目的是为了在鼠标滑动之后只保留最后一次的触发，同时将定时器设置延时一定时间，这样就可以解决鼠标滑动，屏幕切换像飞一样的问题了。

最后

以上就是清新朋友为你收集整理的前端——函数防抖的全部内容，希望文章能够帮你解决前端——函数防抖所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。