在我们使用的浏览器中，用户可以使用通过高频率的点击来触发开发人员写的代码，就比如抢购按钮的疯狂点击；这些高频率的操作会降低浏览器的运行速度，浪费了资源，在网络请求中还会给服务器带来很大的压力，所以我们可以通过让函数节流和函数防抖操作，来提高网页中的性能。
函数节流
<script>
function throttle(fn,timeout){
// 需要使用变量将上一次触发的时间存储起来，这里存储在函数的静态成员中
if(throttle.lastTime === undefined){
throttle.lastTime = 0;
}
// 获取到当前的时间戳
let currentTime = new Date().getTime();
if(currentTime-throttle.lastTime > timeout){
// 执行对应的函数
fn();
// 将当前的时间存储起来
throttle.lastTime = currentTime;
}
}
</script>
测试代码：
<script>
var i = 0;
window.onclick = function() {
throttle(function() {
i++;
console.log('鼠标点击了' + i + '次');
}, 1000)
};
</script>
除此之外JavaScript还有一些触发频率极高的事件，比如鼠标移动事件（onmousemove）、滚动条事件（onscroll）和窗口变化大小事件（onresize）
函数防抖
一般来说用户的鼠标误操作会导致前端代码的误触发，我们则可以认为在某个元素上停留时间长短来判断是否误操作，决定是否继续执行代码，我们可以使用setTimeout来实现。
<script>
function debonce(fn,timeout){
// setTimeout的id存储到函数的静态成员中，不会造成变量的全局污染
clearTimeout(debonce.timeId);
debonce.timeId = setTimeout(fn, timeout);
}
</script>
测试代码：
<script>
let i = 0;
window.onmousemove = function() {
debonce(function() {
i++;
console.log('鼠标移动了' + i + '次');
}, 1000)
};
</script>