JS 防抖和节流

防抖（debounce）是在一定时间内只执行一次函数调用。如果在规定的时间内再次触发该函数，则会重新计算执行时间。通俗地说，防抖是在短时间内大量触发事件时，只在最后一次事件触发结束后才真正的执行事件的过程。举个例子，当用户快速输入搜索关键字时，浏览器每隔500ms才会执行事件处理函数。这样做的好处是，防止大量不必要的事件触发，对性能有很好的优化作用。

节流（throttle）则是在规定时间内执行一次函数调用。如果在规定的时间内再次触发该函数，则会被忽略。节流是在一段时间内只执行一次操作，即使在这个时间段内多次触发，也只有一次会生效。应用场景中，节流通常用于滚动、拖拽、缩放等频繁操作，以保证性能不会因为频繁的操作而降低。

总的来说，防抖适用于短时间内大量触发事件的情况，而节流适用于持续触发事件的情况。

• 防抖

let timer = null;

const onClick = () => {
	if (timer) clearTimeout(timer);

	timer = setTimeout(() => {
		handleClick();			
		timer = null;
	}, 500)
}

• 节流

let timer = null;

const onClick = () => {
	if (timer) return;

	timer = setTimeout(() => {
		handleClick();		
		timer = null;
	}, 500)
}

在 react 中适用 lodash 库实现防抖和节流

import { debounce, throttle } from 'lodash';

<Button onClick={debounce(handleClick, 3000)}>防抖</Button>
<Button onClick={throttle(handleClick, 3000)}>节流</Button>