节流和防抖

节流（throttling）和防抖（debouncing）

一、概念
节流（throttling）和防抖（debouncing）是在处理用户输入和其他事件时常用的两种性能优化技巧。它们的主要目的是控制事件触发的频率，以避免不必要的重复操作，减轻系统负担，提高用户体验。

1.节流（Throttling）：

节流是一种限制事件处理函数执行频率的技术，确保事件在一定时间间隔内最多执行一次。
当一个事件被触发，节流会立即执行事件处理函数，并在指定的时间间隔内忽略任何后续触发的相同事件。
适用于需要定期更新的操作，如滚动事件、搜索框输入，确保它们不会太频繁地触发，减轻服务器和客户端的负担。
2. 防抖（Debouncing）：

防抖是一种延迟事件处理函数执行的技术，确保事件触发后，在指定的时间内没有更多事件触发时才执行一次事件处理函数。
当一个事件被触发，防抖会等待一段时间，如果在这段时间内没有更多事件触发，那么事件处理函数将被执行。
适用于防止重复提交表单、搜索建议等需要等待用户停止输入的场景。
二、区别
1.触发方式：节流是在一定时间间隔内最多执行一次事件处理函数，而防抖是等待一段时间后执行事件处理函数，如果在等待期间有新的触发事件，等待时间会被重新计时。

2.应用场景：节流适用于需要限制事件频率的场景，确保事件在一定间隔内触发；防抖适用于需要等待用户停止操作后才执行的场景，例如搜索建议、输入框验证。

简而言之：在初始化时，节流会立即执行一次事件处理函数，而防抖不会在初始化时执行。防抖只有在触发事件后，并且在指定的等待时间内没有再次触发事件时才会执行事件处理函数。这是两者之间的关键区别。

三、实际运用
1. 滚动事件处理：

节流：用于限制滚动事件处理的频率，以减少滚动事件的处理次数，从而提高性能。
防抖：用于延迟执行滚动事件处理，以确保用户完成滚动操作后再触发相关操作，例如加载更多数据。
2. 窗口大小调整事件：

节流：用于在窗口大小不断调整时，限制事件处理的频率，以避免过多的重绘操作。
防抖：用于确保只有在用户停止调整窗口大小后才执行相应的调整操作。
3. 搜索框自动完成：

防抖：用于在用户输入搜索关键字时，延迟执行自动完成搜索操作，以减少请求次数，降低服务器负担。
4. 表单输入验证：

防抖：用于在用户输入表单字段时，延迟进行验证操作，以减少验证请求的频率。
5. 按钮点击事件：

节流：用于限制按钮点击事件的频率，以避免用户多次点击导致的重复操作。
6. 实时聊天：

防抖：用于实时聊天应用中，延迟发送用户输入的消息，以减少网络请求和提高性能。
7. 轮播图切换：

节流：用于限制轮播图切换的频率，以提高用户体验，防止用户快速切换图片。
8. 鼠标移动事件：

节流：用于限制鼠标移动事件的频率，以减少处理次数，提高性能。