Qui-Note官网Logo
导航:Qui-Note/debounce

debounce

js防抖应用场景

JS函数防抖原理及实现方式

防抖原理:
函数在n秒之内只能执行一次,如果事件触发后,n秒内事件又被触发,那么就会重新计算延时时间。

防抖作用:
防止事件被频繁触发,一定时间内支触发一次。提高浏览器资源利用率和速度,防止过分消耗浏览器内存。

应用场景:页面在滚动时会频繁触发一个事件,可以利用防抖,允许几秒钟内触发一次!

function debounce(fn,time){
 	var timer = null;
 	return function(){
 		if(timer){
 clearTimeout(timer)
 		}
 		timer = setTimeout(function(){
 fn.apply(this,arguments)
 		},time)
 	}
 }
 
function showTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console.log('滚动条位置:' + scrollTop);
}

window.onscroll = debounce(showTop,1000)  

效果展示:

X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90