浅谈js的防抖与节流

背景

今天公司提了一个需求，需要通过用户输入的内容来实时展示提示信息，因为需要调用接口获取数据，所以不可能用户输入的每个值的改变都调用一次接口，这样会增加服务器的负面，产生不必要的损耗。

解决办法

通过防抖与节流能够有效地解决这个问题。

原理

防抖：通过监听用户输入的改变（或其他方式的改变）来调用一个防抖函数，这个防抖函数会接收一个处理函数handle，handle函数设置一定的延时。

1. 当在这个延时中用户的输入再次改变，就会再次调用防抖函数，此时返回函数会将这个延时清除之后在重设一次延时
2. 当输入的变化在这个延时之后，才会真的调用handle函数。

防抖函数：

debounce(fn,wait){
	let timeout = null;
	return function() {
  		if(timeout !== null) clearTimeout(timeout)
  		timeout = setTimeout(fn, wait);
 	}
}

节流：通过监听用户输入的改变（或其他方式的改变）来调用一个节流函数，这个节流函数会接受一个处理函数handle，handle函数设置一定的延时。

1. 当在这个延时中用户的输入再次改变，不重新调用handle函数，也不清除延时，
2. 当到达这个延时时，handle函数被调用，而输入的改变会重新为handle函数设置延时。

function throttle(fn, delay) {
 	var prev = Date.now()
 	return function() {
  		var now = Date.now()
  		if (now - prev > delay) {
   			fn()
   			prev = Date.now()
  		}
 	}
}

对比

对比两种方式可以发现，防抖会为改变重设延时，而节流不会为改变重设延时而是确保每次调用handle函数一定大于等于延时。