Question

我正在尝试显示svg矩形的宽度（使用svgdot.js库）。我在矩形调整大小上有一个侦听器：

   rect.on('resizing', function (event: any) {
      self.setState({width: rect.width(), height: rect.height()});
    });

但是，这当然会频繁触发状态更新。尽管我有一个非常简单的用户界面，但页面却变得很滞后。

有没有一种更有效的方法可以实时更新状态或变量而不使UI变慢？

Answer 1

您应该使用debouncing or throttling。

去抖强制执行一个函数，直到经过一定时间后才再次调用该函数。就像“只有在没有调用它的情况下经过100毫秒时才执行此函数。”

限制功能可随时间推移调用函数的最大次数。就像“每100毫秒最多执行一次此功能”。

import debounce from 'lodash.debounce';

rect.on(
  "resizing",
  debounce(function (event: any) {
    this.setState({ width: rect.width(), height: rect.height() });
  }, 1000)
);

反应：如何频繁更新状态

1 个答案: