# 在开发 Gutenberg 插件时，如何处理防抖？

- Link: https://www.ixiqin.com/2022/03/02/gutenberg-debounce/
- Published: 2022-03-02T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/03/02/gutenberg-debounce/#)

 * [思路](https://www.ixiqin.com/2022/03/02/gutenberg-debounce/#%e6%80%9d%e8%b7%af)
 * [参考代码](https://www.ixiqin.com/2022/03/02/gutenberg-debounce/#%e5%8f%82%e8%80%83%e4%bb%a3%e7%a0%81)

在开发 Gutenberg 插件时，如果你需要对编辑器的内容进行处理，则需要为其加入防抖措施，
避免你的函数被频繁调用。

## 思路

由于编辑器需要高频处理，因此需要采用防抖策略，避免将多次输入视为不同的事件。这里
可以使用 WordPress 提供的 `useDebounce` 来实现控制。需要注意的是，WordPress 自动
的 Debounce 函数传入的参数应当采用 `useCallback` 来进行包裹。

## 参考代码

    ```javascript
    import {subscribe} from "@wordpress/data";
    import {useDebounce} from  "@wordpress/compose"
    import {useCallback} from "@wordpress/element";

    const debounced = useDebounce(
            useCallback(() => {
                // do some thing
            }),500
        );
    subscribe(debounced);
    Code language: JavaScript (javascript)
    ```