防抖和节流

一、什么是防抖和节流？

在前端开发中，当用户频繁触发某个事件时，很容易出现性能问题或意外行为。为了避免这种情况，我们常常使用两种技术来控制事件的触发次数：防抖（Debounce）和节流（Throttle）。

防抖是指在一定时间内，重复触发同一事件时只执行最后一次操作，也就是说在固定的时间间隔内，只有最后一次操作才会被执行。可以想象为一个开关，只有触发结束才会执行相应的操作。

而节流则是指将连续多个触发合并为一个，在固定的时间间隔内最多只执行一次。可以想象为一个水龙头，每次只会滴下一滴水。如果频率过高，水龙头会将每次滴落的水分别存起来，在固定的时间间隔内统一倒出去。这样可以减少不必要的计算和操作次数，提高性能和用户体验。

---

二、防抖

防抖有很多场景可用，例如输入框的关键词提示，窗口缩放事件等。它能够减少用户误操作，避免数据的不必要更新和发送请求，提高系统和网页的性能。

防抖的实现方式是通过一个定时器来完成。当事件被触发时，定时器会启动并设定一个时间间隔，如果在这个时间间隔内再次触发该事件，定时器会被清除并重新设定一个新的时间间隔。如果在时间间隔结束后仍未再次触发该事件，那么该事件就会被执行。

下面是一个简单的防抖示例代码：

import time

def debounce(wait):
    def decorator(func):
        last_time = 0
        
        def inner(*args, **kwargs):
            nonlocal last_time
            now = time.time()
            if now - last_time < wait:
                return
            result = func(*args, **kwargs)
            last_time = time.time()
            return result
        
        return inner
    
    return decorator

@debounce(1)
def do_something():
    print("Something done.")
    
while True:
    input_str = input()
    if input_str == 'q':
        break
    do_something()

定义了一个 debounce() 装饰器，它接受一个参数 wait，即时间间隔。然后，我们定义了一个闭包函数 inner，用于实现具体的防抖逻辑。在闭包函数中，我们使用了 nonlocal 关键字来修改外部变量 last_time，表示最后一次触发该事件的时间。如果当前时间距离上一次触发事件的时间小于 wait，就不会执行操作，否则就会执行操作并更新最后一次触发事件的时间。

最后，我们将 do_something() 函数进行了防抖装饰，这样无论用户多快地输入，都只会在最后一次输入后输出结果，避免了频繁输出的情况。

三、节流

节流也有很多场景可用，例如滚轮滚动事件、鼠标移动事件等。它能够减少事件的不必要触发和处理，提高系统和网页的性能。

节流的实现方式是通过一个计时器来完成。当事件被触发时，计时器会启动并设置一个时间间隔，如果到达时间间隔后事件仍然在触发，那么事件就会被执行一次。如果在时间间隔内事件没有再次触发，那么计时器会被清除，事件也就不会被执行。这样可以保证事件的触发间隔在规定时间内，减少不必要的事件触发。

下面是一个简单的节流示例代码：

import time

def throttle(wait):
    def decorator(func):
        last_time = 0
        
        def inner(*args, **kwargs):
            nonlocal last_time
            now = time.time()
            if now - last_time > wait:
                result = func(*args, **kwargs)
                last_time = now
                return result
        
        return inner
    
    return decorator

@throttle(1)
def do_something():
    print("Something done.")
    
while True:
    input_str = input()
    if input_str == 'q':
        break
    do_something()

同样定义了一个装饰器 throttle()，它也接受一个参数 wait，即时间间隔。然后，我们定义了一个闭包函数 inner，用于实现具体的节流逻辑。在闭包函数中，我们同样使用了 nonlocal 关键字来修改外部变量 last_time，表示最后一次触发该事件的时间。如果当前时间与上一次触发该事件的时间差大于 wait，就会执行操作并更新最后一次触发事件的时间，否则不会执行操作。

最后，我们将 do_something() 函数进行了节流装饰，这样无论用户多快地输入，都只会在每隔 1 秒后输出结果，避免了频繁输出的情况。