函数节流与函数去抖的简单实现

Myth丶恋晨 2022-05-11 11:18 163阅读 0赞

> 对于节流、去抖的定义：  
> [The Difference Between Throttling and Debouncing][](概念定义)  
> [Debouncing and Throttling Explained Through Examples][]（一些复杂demo的测试）

这里引用上面文章对去抖和节流的定义：

**节流(Throttling)**：“每 100ms 函数最多只执行一次”

> Throttling enforces a maximum number of times a function can be called over time.

**防抖(Debounce)**：“只有在 100ms 中没有调用这个函数的情况下，才会执行这个函数”

> Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called.

#### 去抖(Debounce) ####

最简单的去抖就是运用 `setTimeout`，当事件触发时先将这个事件放入一个 `setTimeout` 中延迟执行，下次执行重新设置这个定时器。

function debounce(func, wait) { 
        let timer = null;
        return function() { 
            timer && clearTimeout(timer);
            timer = setTimeout(func, wait)
        }
    }

加上对上下文、参数的绑定

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

#### 节流(Throttling) ####

[The Difference Between Throttling and Debouncing]: https://css-tricks.com/the-difference-between-throttling-and-debouncing/
[Debouncing and Throttling Explained Through Examples]: https://css-tricks.com/debouncing-throttling-explained-examples/