Js 防抖与节流的区别

1.防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

常见应用场景:用户注册时的手机号码验证和邮箱验证

var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
timer = setTimeout(function(){
  console.log("函数防抖");
}, 300);
};

2.节流

高频事件触发，但在n秒内只会执行一次，节流会稀释函数的执行频率

常用场景:监听页面元素滚动事件，因为页面元素滚动是个高频触发事件

var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
  // 判断是否已空闲，如果在执行中，则直接return
  return;
}
canRun = false;
setTimeout(function(){
  console.log("函数节流");
  canRun = true;
}, 300);
};