节流：
如果存在大量操作DOM的情况，可能会卡顿，所以用到节流
概念：节流，就是指连续触发事件但是在n秒钟只执行一次函数
开发场景：轮播图连续点击效果，鼠标快速移动，页面尺寸缩放resize,滚动条滚动，就可以增加节流
原理：事件触发的两个时间相减，如果大于等于默认那个时间，之后再去调用函数
<script>
const box = document.querySelector('.box')
let i = 0
//渲染函数，触发事件，如鼠标移动，让box里面的i变量+1
function mouseMove() {
box.innerHTML = ++i
}
//节流函数，事件间隔大于固定时间，调用函数
function throttle(fn, t) {
let startTime = 0
return function () {
let now = Date.now()
if (now - startTime >= t) {
fn()
startTime = now
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))
</script>
防抖：
概念：防抖，就是触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间
开发场景：搜索框防抖
原理：采取（执行一次）定时器方式，在触发事件时不断清除定时器，当事件不再执行n秒后，开启定时器，执行函数
<script>
const box = document.querySelector(".box");
let i = 0;
//渲染函数，触发事件，如鼠标移动，让box里面的i变量+1
function mouseMove() {
box.innerHTML = ++i;
}
//防抖函数，一直清除定时器，直到事件不再触发再调用函数
function debounce(fn, t) {
let timeId;
return function () {
if (timeId) clearTimeout(timeId);
timeId= setTimeout(function () {
fn()
}, t);
};
}
box.addEventListener("mousemove", debounce(mouseMove, 200));
</script>
