前端实现节流与防抖（纯代码-可直接拉取）

目录

一、节流

二、防抖

三、使用场景

一、节流

高频率触发的事件,在指定的单位时间内，只响应第一次(前面触发的执行前，忽略后面的事件)

let abc = true;  // 定义开关
const logout = () => {
  if (!abc) {
    return;
  }
  abc = false;
  console.log('退出登录');  // 主要执行代码逻辑
  setTimeout(() => {
    abc = true;
  }, 3000);  // 设置时间
};

二、防抖

高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)

let abc = null;
const logout = () => {
  clearTimeout(abc); // 清除定时器
  abc = setTimeout(() => { // 设置计算时间
    test();
  }, 3000);
  function test() {
    console.log('退出登录'); // 主要执行代码逻辑
  }
};

三、使用场景

防抖（debounce）
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

节流（throttle）
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。