面试题：JavaScript性能优化之函数节流与防抖

Question

请阐述在JavaScript Web编程中，函数节流（throttle）和防抖（debounce）的原理，并分别实现一个简单的节流函数和防抖函数。

Answer 1

函数节流（throttle）原理

函数节流是指在一定时间间隔内，无论触发多少次事件，都只执行一次函数。就像是一个水龙头，在一段时间内不管你怎么频繁开关，它都按照固定的间隔出水。比如滚动条滚动事件，如果不节流，每次滚动都会触发函数，而节流后就可以按照设定的时间间隔触发，避免函数被高频调用。

函数防抖（debounce）原理

函数防抖是指当持续触发事件时，一定时间内没有再触发事件，事件处理函数才会执行一次，如果在设定时间内又触发了事件，则重新开始计时。比如搜索框输入，用户在不断输入时，不会立即发起搜索请求，而是等用户停止输入一段时间后才发起请求，避免频繁请求服务器。

节流函数实现

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

防抖函数实现

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