面试题：JavaScript函数防抖与节流及其性能影响

函数防抖（Debounce）原理

函数防抖指的是在事件被触发n秒后再执行回调，如果在这n秒内又触发了该事件，则重新计时。其原理是通过使用setTimeout延迟执行函数，并在每次触发事件时清除之前的定时器，以保证只有在最后一次触发事件后的n秒才真正执行回调。

函数节流（Throttle）原理

函数节流指的是在一定时间间隔内，无论事件触发多少次，都只执行一次回调。其原理是通过记录上一次执行回调的时间，每次触发事件时检查当前时间与上一次执行时间的间隔是否大于设定的时间间隔，如果大于则执行回调，并更新上一次执行时间。

防抖函数实现

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

节流函数实现

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

适用场景

防抖：
- 搜索框输入联想：用户在输入过程中，不必每次按键都发起请求，等用户停止输入一段时间后再发起请求，减少请求次数。
- 窗口resize事件：当窗口大小改变时，不必每次都触发处理函数，而是等用户停止调整窗口后再执行相关操作。
节流：
- 滚动条滚动事件：比如监听滚动条滚动加载更多数据，设置节流可以避免频繁触发加载操作，优化性能。
- 鼠标连续点击事件：防止用户连续快速点击造成多次提交等问题，只在规定间隔内执行一次操作。

对函数性能的影响

防抖：减少函数的执行次数，避免不必要的计算和请求，从而提升性能，特别是在短时间内频繁触发事件的场景下，能显著降低资源消耗。
节流：限制函数在一定时间内的执行次数，确保函数不会过于频繁地执行，避免高频率执行导致的性能问题，保证在连续触发事件时，系统资源的使用相对稳定。

星途面试题库