如何在 Web 组件中展平/去抖动属性更改回调

Question

我有一个使用 attributeChangedCallback 的 Web 组件

attributeChangedCallback(name, oldValue, newValue) {
    // TODO: use something like rxjs debounce time?
    this.expensiveRenderer()
}

我正在为每个动画帧上的两个属性设置新值： 此外，这可以增加到设置 4 个属性。

component.setAttribute("att1", r);
component.setAttribute("att2", p);

这将触发attributeChangedCallback 两次，昂贵的渲染器也会触发两次。

有没有一种有效的方法可以将两个属性设置在一起，或者将更改的效果作为一个类似于去抖动时间的单个事件？

我对使用 setTimeout / clearTimeout 有点怀疑，因为它在每个动画帧 60 fps 上调用。

为了提供更好的概览，我的组件看起来有点像：

<mm-spirograph
    fixed-circle-radius="100"
    moving-circle-radius="10"
    moving-circle-locus-length="30"
    repeat-count="100"
  ></mm-spirograph>

它使用 webGL 渲染螺旋图，并计划用于生成艺术。 我喜欢它的简单性，有点不愿意使用 JSON 属性。

另外，spirograph 的动画与组件保持分离，想法是使用 spirograph 作为静态渲染或更改属性可以轻松地做动画。此处仅对两个属性进行动画处理，但在不同情况下会有所不同。

此外，还计划添加类似的组件，如果需要，可以通过设置属性来设置动画。

function animateSpirograph(spirograph, r, p, rIncrement, pIncrement) {
  let v = r;
  if (v + rIncrement > 100) rIncrement = -Math.abs(rIncrement);
  if (v + rIncrement <= 0) rIncrement = Math.abs(rIncrement);
  v = v + rIncrement;
  r = v;
  let w = p;
  if (w + pIncrement > 200) pIncrement = -Math.abs(pIncrement);
  if (w + pIncrement <= 0) pIncrement = Math.abs(pIncrement);
  w = w + pIncrement;
  p = w;
  spirograph.setAttribute("moving-circle-radius", r);
  spirograph.setAttribute("moving-circle-locus-length", p);
  window.requestAnimationFrame(() =>
    animateSpirograph(spirograph, r, p, rIncrement, pIncrement)
  );
}

Danny 的建议很有趣，我可以有第三个属性，它可能是来自 requestAnimationFrame 的时间戳，并将其标记为仅用于动画的可选属性。因此，每次更改属性时，我们都需要设置这个额外的属性来实际触发渲染。但这听起来有点 hacky/patch。

Answer 1

使用超时。这允许您的整个代码在进行昂贵的渲染之前执行。

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.renderTimeout = null;
    this.renderCalled = 0;
    this.renderDone = 0;
  }
  
  static get observedAttributes() {
    return ['time','direction'];
  }

  expensiveRenderer() {
    this.renderCalled++;
    if (this.renderTimeout) {
      clearTimeout(this.renderTimeout);
    }
    
    this.renderTimeout = setTimeout(
      () => {
        this.renderDone++;
        this.innerHTML = `<p>The time is: ${this._time}</p><p>And the direction is ${this._direction}</p><p>Render called: ${this.renderCalled}</p><p>Rendered: ${this.renderDone}</p>`;
      }, 1
    );
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this[`_${name}`] = newValue;
      this.expensiveRenderer();
    }
  }
}

customElements.define('my-el', MyEl);

const component = document.querySelector('my-el');

setTimeout(() => {
  component.setAttribute("time", "1:00");
  component.setAttribute("time", "2:00");
  component.setAttribute("time", "3:00");
  component.setAttribute("time", "4:00");
  component.setAttribute("direction", "East");
  component.setAttribute("direction", "West");
  component.setAttribute("direction", "South");
}, 2000);

<my-el time="12:00" direction="North"></my-el>

在此我们多次设置属性并多次调用该函数。但是您会看到，我们实际上只执行两次虚假昂贵的渲染例程。 （如果 DOM 解析器需要额外的时间来解析您的初始 HTML，则可能是三倍。

setTimeout 可以在下一个事件周期发生。并且必须快于每秒 60 次。我使用0 或1 的超时来将事件作为队列中的下一件事。是的，在回调之前可能会发生其他事情，但它仍然应该在亚秒时间范围内。

requestAnimationFrame 发生在刷新时间范围内，通常为每秒 60 次。