防抖与节流

在前端开发中，我们常常会遇到这种情况：当事件触发非常频繁时，每一次的触发，回调函数都要去执行。（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）防抖与节流函数可以帮我们解决此类问题。

要使用防抖与节流函数，首先引入Lodash。

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次。（用户操作频繁，但只执行一次）

写一个文本框测试：

请输入搜索的内容：<input type="text" />

为解决每输入一个字就会向服务器传递一次数据的问题，使用防抖函数_.debounce

<script>
	let input=document.querySelector('input');
	input.oninput=_.debounce(function(){
		console.log('ajax发请求')//通过控制台发现，只有全部内容输入完毕一秒后才发送 请求
	},1000)
</script>

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。

写一个计数器测试：

<div>
	<h1>我是计数器<span>0</span></h1>
	<button>点我加上1</button>
</div>

为解决用户快速点击而浏览器来不及响应的问题，使用节流函数_.throttle，给浏览器充裕的时间解析代码。（用户操作很频繁，但是把频繁的操作变为少量的操作）

let span=document.querySelector('span');
	let button=document.querySelector('button');
	let count=0;
	button.onclick=_.throttle(function(){
		count++;
		span.innerHTML=count;
		console.log('count+1')//通过控制台发现，无论鼠标点击速度多快，一秒只执行一次
	},1000)