防抖和节流

防抖（debounce）

定义： 防抖是指在事件被频繁触发时，只有在事件停止触发后的指定时间内才执行一次事件处理函数。其核心思想是将多次执行变为最后一次执行。

原理： （延迟执行 + 重置计时）当事件第一次触发时，设置一个定时器，延迟指定时间后执行处理函数。如果在延迟时间内事件再次被触发，则清除之前的定时器，重新设置一个新的定时器。只有当事件在延迟时间内没有再次触发，处理函数才会执行。

应用场景：

• 输入框输入：用户在搜索框中输入时，不需要在每次按键时都发送请求，而是等待用户输入完成后再发起请求。
• 窗口调整：当用户调整窗口大小时，不需要在每次窗口尺寸变化时都重新计算布局，而是等待用户调整完成后才执行布局计算.。

function debounce(fn, delay = 500) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
};

节流（throttle）

定义： 节流是指在一定时间内只允许事件处理函数执行一次，无论事件触发了多少次。

原理： （控制执行频率）设置一个时间间隔，当事件第一次触发时，立即执行处理函数，并记录当前时间，在后续事件触发时，检查当前时间与上次执行时间间隔是否大于设定的时间间隔，如果是，则再次执行处理函数并更新时间记录。

应用场景：

• 滚动加载：当用户滚动页面时，每隔一定时间执行一次滚动加载函数，避免频繁触发导致性能问题。
• 表单提交：当用户点击提交按钮，可能多次点击，在一定时间范围内，应该只提交一次。

function throttle(fn, delay = 500) {
    let timer = null;
    return function() {
        if (!timer) {
            fn.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    }
};