JS 中函数节流和函数防抖的区别

区别

• 函数节流是指一定时间内 js 方法只跑一次。比如人的眨眼睛，就是一定时 间内眨一次。这是函数节流最形象的解释。函数防抖是指频繁触发的情况
  下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一 定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，
  司机才开车。
• 函数防抖： 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

let box = document.getElementById('box'); 
let timer = 0 box.onclick = function () {
clearTimeout(timer) 
timer = setTimeout(() => {
console.log(1) 
}, 1000)}

应用场景

• 函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验 证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正
  确，再弹出提示语。
• 函数节流：节流就是指连续触发事件但是在 n 秒中只执行一次函数。

let box = document.getElementById('box'); 
let timer = 0; 
box.onclick = function () {
if (!timer) { timer = setTimeout(() => {
timer = 0;
console.log(1)
}, 1000) }}

• 函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因 为滚动事件，是一个高频触发的事件