自定义页面延迟触发（防抖 Debounce）

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

本案例来自三方开发者「Peng」

1. 使用场景

本例介绍一下在宜搭自定义页面中如何实现延迟触发。

input 输入数据时请求服务器等，防止触发限流。

文档来源：防抖 Debounce

2. 原理

在事件被触发n秒后，再去执行回调函数。如果n秒内该事件被重新触发，则重新计时。结果就是将频繁触发的事件合并为一次，且在最后执行。

例如：

电梯5秒后会关门开始运作，如果有人进来，等待5秒，5秒之内又有人进来，5秒等待重新计时...直至超过5秒，电梯才开始运作。

3. 实现功能

3.1 函数配置

（1）配置变量

（2）配置防抖函数

if (this.state.debounceTimer) {
  clearTimeout(this.state.debounceTimer);
};
const debounceTimer = setTimeout(() => {
  // 需要防抖处理的业务逻辑从此往下写
  // your code ...
  this.setState({
    debounceTimer: null,
  });
}, 500);
this.setState({
  debounceTimer,
});

3.3 使用示例

（1）创建自定义页面

（2）无防抖示例

export function onChangeWithoutDebounce({ value }) {
  const textareaField_l9qggl4g = this.$("textareaField_l9qggl4g");
  textareaField_l9qggl4g.setValue(textareaField_l9qggl4g.getValue() + value + '\n');
}

（3）有防抖示例

export function onChangeWithDebounce({ value }) {
  if (this.state.debounceTimer) {
    clearTimeout(this.state.debounceTimer);
  };
  const debounceTimer = setTimeout(() => {
    // 需要防抖处理的业务逻辑从此往下写
    // your code ...
    const textareaField_l9qggl4i = this.$("textareaField_l9qggl4i");
    textareaField_l9qggl4i.setValue(textareaField_l9qggl4i.getValue() + value + '\n');
    this.setState({
      debounceTimer: null,
    });
  }, 500);
  this.setState({
    debounceTimer,
  });
}

4. 实现效果

4.1 无防抖

可见无防抖长按输入了多次。

4.2 有防抖

可见有防抖长按只输入了一次。

5. 防抖应用案例在线试玩

下拉选择配置实时搜索表单数据

6. 在线试玩

示例中心 | 开发者赋能平台

让企业自建专属应用更简单，持续创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_EV117QZ9KD6EK0334JNU&from=yuque_subject