chart.changeSize 调用时出现巨大BUG，造成浏览器卡死

[hexu6788]

版本为 @antv/g2 5.0.3
场景：将 高宽为200px的 Chart，改为 高宽为 500px。 200px到500px的过程要渐变完成。因为循环会调用 chart.changeSize 。
每次调用高宽各增加 10px。直至高款为500px。

watch([() => props..width, () => props..height], () => {
chart.changeSize(props..width, props..height)
})

[hexu6788]

调用changeSize后，图表乱了。性能也有问题。我这边是1秒调用changeSize 一次。如果10ms调用一次就要报错

[pearmini]

@hexu6788 10ms 调用的报错内容可以看一下吗？

[hexu6788]

已改4.7版本，报错信息没有了。复现BUG，使用定时器每间隔一段时间调用changeSize方法就可以复现BUG

[pearmini]

性能这个问题，这个 PR 已经解决部分：#4899

[hustcc]

性能这个问题，这个 PR 已经解决部分：#4899

当前这个 pr 的问题解决了吗？

[pearmini]

没有，正在解决

[pearmini]

@hexu6788 这里例子看上去没有问题呢？

import { Chart } from '@antv/g2';

const step = 10;
let width = 600;
let height = 400;

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  width,
  height,
});

chart.data([
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
]);

chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre')
  .animate(false);

chart.render();

let count = -1;
setInterval(() => {
  if (count > 20) return;
  count++;
  chart.changeSize((width += step), (height += step));
}, 10);

[hustcc]

@hexu6788 这个代码中，最好能加一个 debounce 或者 throttle，另外很卡的问题，可以看看是否是因为 watch 带来的死循环，加个打印语句。

watch([() => props..width, () => props..height], () => {
  console.log('111', props.width, props.height); // 👈🏻 这里
  chart.changeSize(props..width, props..height)
})