react中 防抖与节流

防抖

防抖函数的原理：保证在连续触发事件的过程中，只执行最后一次操作

防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

代码

const debounce = (func, delay = 50) => {
let timer = 0;
return function (...args) {
 if (timer) clearTimeout(timer);
 timer = setTimeout(() => {
   func.apply(this, args);
 }, delay);
};
};

使用场景：

• 文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次

• 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

节流

节流函数原理：确保在连续触发事件的过程中，某一时间段内只执行一次操作

代码

时间戳方法（一）

const throttle = (func, delay = 50) => {
let lastTime = 0;
return function (...args) {
 let now = +new Date();
 if (now - lastTime > delay) {
   lastTime = now;
   func.apply(this, args);
 }
};
};

定时器方法（二）

const throttle = (func, delay = 50) => {
let timer = 0;
return function (...args) {
 if (timer) return;
 timer = setTimeout(() => {
   func.apply(this, args);
   timer = 0;
 }, delay);
};
};

使用场景：

• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动。DOM 元素的拖拽功能实现（mousemove）

• 缩放场景：监控浏览器resize

• 滚动场景：监听滚动scroll事件判断是否到页面底部自动加载更多

• 动画场景：避免短时间内多次触发动画引起性能问题