JS 函数防抖(debounce)与函数节流(throttle)

在平时项目开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了！函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

比如下面的这个例子：

 

正常情况下，如果我们不做处理的话，只要滚动，就会触发我们绑定的事件，但通常这个并不是我们需要的，因为这样的，触发事件频繁的话，性能不是很好，这个时候我们就可以使用函数防抖和节流来处理了，如下

函数防抖：主要是依靠定时器，设置一个时间，达不到我们设置的时间，就可以将定时器及时清除，那么绑定的事件也不会触发了

//函数防抖
		function debounce(callback,delay){
			
			var timer = null;
			
			return function(e){
				
				clearTimeout(timer)
				
				timer =  setTimeout(()=>{
					
					callback.call(e)
					
				},delay)

				
			}
			
		}

使用函数防抖之后的事件绑定

window.onscroll = debuence(function(){
			console.log("页面滚动了")
		},500)

函数节流：实现的原理，主要是利用时间戳，利用两次的时间戳差值跟我们设置的值进行比较，不满足条件的话则不触发事件。

//函数节流
		function throttle(callback,duration){
			
			var lastTime = new Date().getTime();
			
			return function(){
				var now = new Date().getTime();
				
				if(now-lastTime >duration){
					callback();
					lastTime = now;
				}
				
			}

		
		}
		
		window.onscroll = throttle(function(){
			console.log("页面滚动了")
		},500)

可以看到的是，当我们使用函数防抖或者节流处理之后，事件函数调用的频率大大降低了。