防抖与节流的使用详解（附代码解析）

一、防抖

        防抖，可以理解为防止用户“手抖”导致的多次点击问题，比如：一个提交按钮，用户点击了多次，则会导致出现多条提交请求，导致数据混乱；又可以用于用户输入时，根据用户输入实时查询，当用户“一直”输入时，检测到值的变化，会不停的发送请求。到我们通过防抖处理后，则当用户“多次”点击或者输入时，只执行最后一次的结果。

        总结：“手抖”、“多次”、“不停”。可以总结为一句话：当用户一直操作的情况下，不会触发对应的操作，到用户停止操作后才会执行对应的操作。

        主要实现依据：setTimeout（延时器）。将用户操作的结果延迟到指定时间后触发，在对应的时间段内，再次触发事件，则清除上次的延时器，开启下一次的延时器，彼此反复。

二、节流

        节流，可以理解为减少事件触发的频率，比如：一段时间内该事件不停的触发，触发了一千次，项一条庞大的事件流，而节流就是在这一段时间内，值允许触发一次该事件。从而将庞大的事件流进行截断限流。例如：鼠标移动事件等高频率触发的事件方法，可以通过节流进行处理，避免性能的浪费。

        总结：“截断”、“限流”。在一定的时间段内只能触发一次。与防抖相比，防抖只有一直点击操作就不会触发对应的操作。而节流则是就算你一直点击，在一段时间内也会触发一次。

        主要实现依据：setTimeout（定时器）。判断定时器是否存在，如果不存在则开启一个新的定时器，在该定时器中执行对应的逻辑或请求，然后清除该定时器。判断定时器是否存在，如果存在则return。