用状态机：轻松搞定防抖与节流

前端

2023-10-12 03:41:04

一、有限状态自动机：概念与应用

有限状态自动机（Finite-State Machine, FSM）是一种抽象的计算模型，它由一组状态和一组状态之间的转移组成。当自动机处于某个状态时，它可以根据输入执行某种操作，并转移到另一个状态。

有限状态自动机被广泛应用于计算机科学的各个领域，包括语言识别、编译器设计和计算机硬件设计等。在前端开发中，我们也可以使用有限状态自动机来实现一些复杂的操作，例如防抖和节流。

二、防抖：消除快速重复执行

防抖是一种技术，它可以防止某个函数在短时间内被重复执行多次。这在一些场景中非常有用，例如在输入框中输入内容时，我们不希望对每一次输入都触发一个事件。

实现防抖的思路是：在函数被调用后，创建一个计时器。如果在计时器结束之前，函数再次被调用，那么就取消上一次的计时器，并重新开始计时。只有在计时器结束之后，才会真正执行函数。

三、节流：限制函数执行频率

节流是一种技术，它可以限制某个函数在一定时间内只执行一次。这在一些场景中非常有用，例如在页面滚动时，我们不希望对每一次滚动都触发一个事件。

实现节流的思路是：在函数被调用后，创建一个计时器。如果在计时器结束之前，函数再次被调用，那么就忽略这一次的调用。只有在计时器结束之后，才会执行函数。

四、状态机视角下的防抖与节流

从状态机的角度来看，防抖和节流都是一种状态转换的过程。

对于防抖，我们可以定义两个状态：

等待：函数处于等待状态，等待下一次调用。
冷却：函数处于冷却状态，等待计时器结束。

当函数被调用时，它会从等待状态转移到冷却状态。在冷却状态下，如果函数再次被调用，那么它将保持在冷却状态，直到计时器结束。只有当计时器结束之后，函数才会从冷却状态转移回等待状态，并执行函数。

对于节流，我们可以定义两个状态：

等待：函数处于等待状态，等待下一次调用。
执行：函数处于执行状态，正在执行函数。

当函数被调用时，它会从等待状态转移到执行状态。在执行状态下，如果函数再次被调用，那么它将被忽略。只有当函数执行完毕之后，它才会从执行状态转移回等待状态。

五、代码示例与应用场景

在React中，我们可以使用useState和useEffect钩子来实现防抖和节流。

import { useState, useEffect } from "react";

const useDebounce = (callback, delay) => {
  const [debounceTimeout, setDebounceTimeout] = useState(null);

  useEffect(() => {
    if (debounceTimeout) {
      clearTimeout(debounceTimeout);
    }

    const timeout = setTimeout(() => {
      callback();
    }, delay);

    setDebounceTimeout(timeout);

    return () => {
      clearTimeout(timeout);
    };
  }, [callback, delay, debounceTimeout]);
};

const useThrottle = (callback, delay) => {
  const [throttleTimeout, setThrottleTimeout] = useState(null);

  useEffect(() => {
    if (!throttleTimeout) {
      callback();

      const timeout = setTimeout(() => {
        setThrottleTimeout(null);
      }, delay);

      setThrottleTimeout(timeout);
    }

    return () => {
      clearTimeout(throttleTimeout);
    };
  }, [callback, delay, throttleTimeout]);
};