JS函数节流throttle和防抖debounce

[wuyuanlijie]

函数节流和防抖

• 都是优化高频率执行js代码的的一种手段

1. 函数节流

  允许一个函数在一个规定的时间内只执行一次。比如人眨眼睛，就是一定的时间内眨眼一次。

// 1、函数节流 (声明一个变量当标志位，记录当前的代码是否在执行！)
let canRun = true;
document.getElementById('throttle').onscroll = () => {
  if (!canRun) {
    return;  // 判断是否已经空闲，如果在执行的过程中了，那么就直接return；
  }
  canRun = false;
  setTimeout(function() {
    console.log('函数节流，可以在这里执行');
    canRun = true; // 判断是否能执行 这个时候函数已经执行完了 所以可以进行执行了
  }, 300);
}

2. 函数防抖

1. 指的是频繁触发的情况下，只要有足够的空闲时间，才执行一次代码。（等待人陆续上完车后，司机就不会开车，只有没人刷卡了，司机才会开车）。
2. 最常见的就是用户的时候的手机验证和邮箱验证，只有等用户输入完毕后，前端才能检测格式是否正确。
3. 要点是：需要一个setTimeout来辅助实现，延迟需要跑的代码。

let timer = null;
document.getElementById('debounce').onscroll = () => {
  clearTimeout(timer); // 如果多次的触发代码，就用clearTimeout清除掉，重现开始（就像只有输入邮箱完毕后，才能去执行检测格式是否正确的代码）
  timer = setTimeout(function() {
    console.log('函数防抖！'); // 如果在300ms后，没有滚动了，我们可以执行里面的代码。setTimeout做一个缓冲池
  }, 300)
}