大家好，我是程序员_随心，希望能够通过自己的学习输出给你带来帮助。
前言
当我们进行输入框内容校验以及进行窗口的resize、scroll时，如果事件处理函数调用的频率不控制的话，那么会对浏览器造成很大负担，很有可能造成卡顿，用户体验非常差。此时我们可以采用防抖和节流来减少频次，同时又不影响实际效果。
1.什么是防抖和节流？
防抖： 当持续触发事件时，一段时间内没有再触发事件，事件处理函数才会再执行一次。
详细点讲： 当持续触发事件时，一段时间内没有再触发事件，事件处理函数才会再执行一次。如果设定的时间到来之前，又一次触发了事件，那就重新延时。如下图：当持续触发click事件时，并不执行handle函数，延迟1000毫秒后才执行handle函数。
节流： 当持续触发事件时，保证一定时间内只触发一次处理函数。
详细点讲： 节流就比如我们的水龙头，阀门一打开，水哗哗地流，秉承着勤俭节约的传统美德，我们要把水龙头关小一点，让它慢一点流。当我们滚动加载数据时，我们想控制事件在1000ms内执行一次，如下图：
2.防抖和节流的应用场景是什么？
防抖的应用场景：
- 按钮的点击
- 输入框输入
- 鼠标的移入移出
节流的应用场景：
用于减少调用频率。
主要用于高频的事件中，比如mouseover,scroll,resize等。
3.防抖和节流的怎么实现？
函数防抖
function debounce(fn, delay) {
let timer = null;
return function () {
timer && clearTimeout(timer);
timer = setTimeout(fn, delay);
}
}
如何使用呢？
当滚动事件时：
function handle() {
console.log(Math.random());
}
const btn = document.querySelector('#btn');
btn.addEventListener('click', debounce(handle, 1000));
详细案例请见码上掘金
函数节流
函数节流主要有两种实现方式：时间戳和定时器。接下来分别用这两种方法实现：
函数防抖主要有两种实现方式：时间戳和定时器。接下来分别用这两种方法实现：
(1) 使用时间戳实现
function throttle(fn, delay) {
let start = Date.now();
return function () {
let now = Date.now();
if (now - start >= delay) {
fn();
start = Date.now();
}
}
}
(2) 使用定时器实现
function throttle(fn, delay) {
let timer = null;
return function () {
if (!timer) {
timer = setTimeout(() => {
fn();
timer = null;
}, delay);
}
}
}
如何使用呢？
当滚动事件时：
function handle() {
console.log('滚动事件执行');
}
window.addEventListener('scroll', throttle(handle, 1000));
详细案例请见码上掘金
最后
您的每一个点赞及评论都是对我坚持写作最大的支持！ 另外希望各位朋友和我交流讨论，如有不对的地方，更希望批评指正！
我是程序员随心，希望能够通过自己的学习输出给你带来帮助。
