节流
什么是节流
在JavaScript中，节流throttle是一种限制函数执行频率的技术。
当一个函数被频繁调用时，节流能够控制函数执行的次数，以避免过多的计算和资源的浪费。
比如说在游戏中，一个技能的释放是有间隔的。当我们释放了一次技能后，只有过一段时间才能再次释放这个技能。这就是一种节流。
节流的实现
接下来我们就写个函数，来实现节流。我会先为大家展示代码，然后进行解析。
实现节流的一种常见方法是使用定时器。基本的节流函数如下所示：
function throttle(func, wait) { let timer; return function() { if (!timer) { timer = setTimeout(function() { func.apply(this, arguments); timer = null; }, wait); } }; }
该函数接受两个参数：待执行的函数func和等待时间wait。
待执行的函数就是我们每隔一段时间需要调用的函数，wait则是在触发一次后，在wait时间内无法再次触发这个函数。
我们首先拆解一下这个函数的大题结构：
function throttle(func, wait) { let timer; return function() {if (!timer) {...}}; }
其基本结构为：在外层函数throttle设置一个timer变量，然后在内层函数使用了timer变量，并把内层函数作为外层函数的返回值。
这个结构，就是一个标准的闭包结构！（不知道闭包的可以看这篇文章[JavaScript：作用域&变量回收]）
那么这个闭包结构有什么用呢？
其保证了
timer这个变量永远不会被销毁，我们在下一次访问这个函数的时候依然可以用上一次留下来的timer，以确定距离上一次的事件也没有到达指定时间。
再看到内层函数：
function() { if (!timer) { timer = setTimeout(function() { func.apply(this, arguments); timer = null; }, wait); } };
timer是setTimeout的返回值，当timer为空时，就会执行if语句内部的代码：timer = setTimeout()，此时timer就立刻得到了setTimeout的返回值。
然后setTimeout内部的代码要等待 wait时间后才执行。等到 wait时间后，调用函数func，即我们想要节流的函数。随后将 timer = null;保证下一次使用这个函数可以被执行。
在这个过程中，在setTimeout被调用的瞬间，timer就立刻得到了setTimeout的返回值而不为空。这个时间内， if (!timer)就会判断为false，从而不执行内部代码。当 wait时间后，执行 timer = null;，此时if (!timer)就会判断为true，从而进入下一次节流。
另一种常见的实现节流的方式是使用时间戳。基本的节流函数如下所示：
function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); if (now - previous > wait) { func.apply(this, arguments); previous = now; } }; }
该函数使用一个变量previous来记录上一次函数执行的时间戳。当函数被调用时，首先获取当前的时间戳，然后与上一次执行的时间戳进行比较。如果两个时间戳之间的间隔大于等待时间，则执行函数，并更新上一次执行的时间戳。否则，不执行函数。
此处也是使用了和刚才一样的闭包结构，唯一的区别就是前面使用setTimeout来控制时间，而此处利用时间戳的减法控制时间。
这两种实现节流的方式都可以达到限制函数执行频率的效果，具体选择哪种方式取决于具体的使用场景和需求。但是两者利用的重要思想都是闭包结构保留变量。
防抖
什么是防抖
防抖事件指的是在连续触发某个事件时，只有等到一定的时间间隔内没有再次触发，才会执行该事件。其主要目的是防止事件的频繁触发，从而减少不必要的资源消耗和提升性能。
就好比如moba游戏中的回城效果。如果你点击回城后，再次点击回城，那么先前的回城就会被阻断，重新计时。这就是节流的思想。
防抖的实现
防抖的实现通常是通过定时器实现的。当事件触发时，先清除之前的定时器，再重新设置一个新的定时器，在指定的时间间隔内如果没有再次触发事件，则执行该事件。如果在时间间隔内再次触发了事件，则重新设置定时器，并重置计时。
下面是一个示例，使用JavaScript实现一个简单的防抖事件：
function debounce(func, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, arguments); }, delay); }; }
上述示例中，使用了debounce函数来实现防抖功能。debounce函数接受一个需要执行的事件处理函数和延迟时间作为参数，返回一个新的函数。当事件触发时，该新函数会清除之前的定时器clearTimeout(timer);，并重新设置一个新的定时器 timer = setTimeout。如果在延迟时间内再次触发了事件，会重置定时器。直到延迟时间内没有再次触发事件时，才会执行事件处理函数。
具体使用：
function handleScroll() { console.log('Scroll被触发了'); } window.addEventListener('scroll', debounce(handleScroll, 200));
在上述示例中，我们在window对象上监听了scroll事件，并使用防抖函数将事件处理函数包裹起来。延迟时间设置为200毫秒，意味着只有在200毫秒内没有再次触发scroll事件时，才会执行handleScroll函数。
同样的，防抖也利用了闭包思想。
通过使用防抖事件，可以有效地减少事件的触发次数，提升性能和用户体验。
