防抖（Debouncing）： 防抖是指在事件被触发后，等待一定的时间间隔，如果在这个时间间隔内再次触发该事件，则重新计时。只有当事件停止触发一段时间后，才会执行相应的操作。防抖常用于优化输入框的搜索建议、滚动事件等场景，可以减少不必要的请求或操作，提升性能。

节流（Throttling）： 节流是指在一定的时间间隔内只触发一次事件，即使事件在这段时间内多次触发，也只会执行一次相应的操作。节流常用于优化滚动事件、窗口调整事件等，可以减少事件处理的频率，提高性能。

可以参考下图进行理解：

概念理解了，但是怎么实现防抖和节流呢？？？？

例如下列代码，实现的效果是我只要我输入一个内容，就会触发一次。

function search(e) {let str = "您输入了：" + e.value + "<br />";s1.innerHTML = s1.innerHTML + str
}function search2(e) {let str = "您输入了：" + e.value + "<br />";s2.innerHTML = s2.innerHTML + str
}

防抖：

var timer;
function search(e) {// 判断如果timer存在，那么则将timer清除if(timer){clearTimeout(timer)}timer = setTimeout(() => {let str = "您输入了：" + e.value + "<br />";s1.innerHTML = s1.innerHTML + str},3000);
}

节流：

//定义一个变量
var lastTime; 
function search2(e) {var newTime = new Date();//判断当前时间是否已经过了三秒if(!lastTime || newTime - lastTime > 3000){let str = "您输入了：" + e.value + "<br />";s2.innerHTML = s2.innerHTML + str;//三秒过后，将我定义的变量稀释掉lastTime = newTime;}
}