JS防抖和节流

在页面中,如果高频率地触发某些事件,特别是回调函数中有一些耗时的操作的时候,就会多次调用回调函数,容易造成页面假死.要解决这类问题,就要用到防抖和节流.

防抖

防抖的原理很简单,可以理解为延迟执行回调函数,然后在这个延迟的期间,如果不再次触发对应事件,才会进行对应的操作,如果触发了对应的事件,就重新计时,这样就实现了防止过频调用回调函数的效果,实现代码如下:

function debounce(fn,time){
	var timeout = null
	return function(){
		if(timeout !== null)
		cleartimeout(timeout)
		timeout = setTimeout(fn,time)
	}
}

button.addEventListener('click',debounce(callback,1000))

节流

节流则是另外一种思路:第一次事件发生的时候,马上触发回调,但是之后在一定事件内对发生的事件无事,到达一定事件之后才再次接收一次触发,具体代码如下:

function throttle(fn,delay){
	var prev = Date.now()
	return function(){
		var context = this
		var arguments = args
		var now = Date.now()
		if(now - prev >= delay){
			fn.apply(context,arguments)
			prev = Date.now()
		}
	}
}

button.addEventLIstener('click',throttle(callback,1000))