【JS】浅谈防抖与节流

前言

防抖与节流算是面试题常问的一题。各个博客也经常拿电梯举例，再回顾一下。

防抖：假设你进入一部电梯，当你按某个楼层，电梯10秒关一次门，正要关闭的时候。另外的人又按了开门的按钮后进入电梯，此时电梯门又要等10秒中关闭。直到没有人按开门按钮，最后的关闭按钮才会关门。

节流：我们上下班经常坐地铁，我们知道每到一站会有个15秒上下客时间，超过15秒地铁门就会关闭，坐不上和坐过站的都只能等下一辆地铁。

一、防抖

1.1是什么？

上面举了电梯的例子，总结一下防抖就是：
当触发后再次触发，会取消上一次触发的执行，直到最后一次触发后过去设定时间后才执行。

1.2做什么？

经常优化的时候会用，比如按钮输入框的输入。优化高频率执行的代码，控制函数的执行频率，从而避免资源浪费，提高程序性能。

1.3应用场景？

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

1.4实现原理？

我们已知对于频繁触发的会在一段时间内，清除上一次触发的执行之后，再重新开始下一次的执行，直到最后一次执行。

function debounce(fn, interval = 300) {
   
   
  let timeout = null