节流与防抖

作用：节流和防抖作为页面性能优化的一种策略，可以降低回调函数的执行频率，节省计算资源，能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象。

一、节流：简单地说，就是限制一个动作在一段时间内只能执行一次

打个比方，好比我们打英雄联盟或者王者荣耀的时候，释放技能都有一段冷却时间，比如Q技能有5秒的冷却时间，那么我们在5秒钟的时间内只能释放一次Q技能。 

当我们拖动网页上的滚动条时，会不断触发 onscroll 事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。此时就可以使用节流技术，将一定时间内的多次触发限制为一次操作，只计算一次滚动距离，提高了浏览器性能和用户体验。

一般使用场景：

1、scroll 事件，每隔一秒计算一次位置信息等

2、input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求

代码实现：

在节流函数中，我们同样使用了闭包来保存定时器变量 timer 和传入的函数 func。每次触发事件时，如果定时器不存在，就设置一个定时器，并在 delay 时间后执行传入的函数 func。如果在 delay 时间内再次触发事件，由于定时器还存在，就不会执行传入的函数 func。只有在 delay 时间后定时器到达时间后执行传入的函数 func 并清除定时器。

function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

// 使用节流优化滚动事件
window.addEventListener('scroll', throttle(function() {
  console.log('scrolling...');
  // 计算滚动距离
}, 500));

对上拉触底进行节流处理

在 data 中定义 isloading 节流阀

• false 表示当前没有进行任何数据请求
• true 表示当前正在进行数据请求

在 getColors() 方法中修改 isloading 节流阀的值

• 在刚调用 getColors 时将节流阀设置 true
• 在网络请求的 complete 回调函数中，将节流阀重置为 false

在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

• 如果节流阀的值为 true，则阻止当前请求
• 如果节流阀的值为 false，则发起数据请求

 

二、防抖：简单地说，就是 当一个动作连续触发，只执行最后一次。

还是举一个英雄联盟中的例子，比如你按下了回城键，那么在8秒钟之后，就会执行回城事件，但如果你再次按下回城键，那么回城时间又将重新计时，需要在等8秒才会执行回城事件。

例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。

一般使用场景：

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

代码实现：

　在防抖函数中，我们使用了闭包来保存定时器变量 timer 和传入的函数 func。每次触发事件时，我们先清除之前的定时器，再设置一个新的定时器。如果在 delay 时间内再次触发事件，就会清除之前的定时器并设置一个新的定时器，直到 delay 时间内不再触发事件，定时器到达时间后执行传入的函数 func。

function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖优化搜索框输入
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
function search() {
  console.log('searching...');
  // 发送请求获取搜索结果
}
searchInput.addEventListener('input', debounce(search, 500));
searchBtn.addEventListener('click', search);