javascript - 如何在 Web 组件中展平/去抖动属性更改回调
问题描述
我有一个正在使用的 Web 组件attributeChangedCallback
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。
解决方案
使用超时。这允许您的整个代码在进行昂贵的渲染之前执行。
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 次。
推荐阅读
- javascript - Safari Web 扩展 - 无法使用 FileSaver.js 保存文件
- python - 如何访问单击的动态创建的 matplotlib 画布?
- powershell - PowerShell switch 语句在 TCP/UDP 端口扫描程序中不起作用
- python - Python代码将行从一个CSV复制到另一个并添加列
- reactjs - Redux - useSelector 将状态返回为未定义
- android - Jetpack Compose 中图像的无限旋转
- nginx - 如何在 nginx 中访问另一个域的静态文件
- python - 是否可以在 Python 中将 functools.singledispatch 与复合/嵌套/容器类型一起使用?
- nlp - 我们是否可以仅通过查看 512 维 Universal Sentence Encoder Vector 的特征来将乱码与有意义的句子分开?
- java - 在android中解析OkHttp?