Wix中forEach循环内setAttribute仅触发一次的问题排查

我正尝试将从数据库获取的数据发送到Wix的自定义元素中，为此使用了setAttribute和attributeChangedCallback进行通信。

主代码 #

var fetchedData = await fetchData();

fetchedData.forEach(function (item, index) {
    console.log(item, index); //输出正常：打印所有条目
    $w('#customElement1').setAttribute('data', index); //但该方法似乎仅触发一次，仅弹出值"11"
})

自定义元素代码 #

attributeChangedCallback(name, oldValue, newValue) {
    if(name === 'data') {
      alert(newValue); //输出：'11' 预期输出：'1, 2, 3, 4, 5, 6...'
    }
 }
 static get observedAttributes() {
    return ['data'];
 }

循环内其他操作都执行了11次，说明循环正常，但attributeChangedCallback仅弹出最后一个索引值"11"，而非预期的逐个索引值，请问问题出在哪？

问题原因与解决方案 #

原因：浏览器的DOM属性更新批量优化 #

浏览器会对短时间内的DOM属性更新做批量合并优化——当同步代码中多次修改同一个元素的同一个属性时，浏览器不会每次修改都立刻触发attributeChangedCallback，而是等所有同步代码执行完毕后，仅用最终的属性值触发一次回调。你的循环是同步执行的，11次setAttribute几乎瞬间完成，浏览器直接使用了最后一次的index值11。

解决方案 #

1. 异步延迟触发属性更新

给每次setAttribute添加微小延迟，让浏览器有足够时间触发回调：

var fetchedData = await fetchData();

fetchedData.forEach(function (item, index) {
    console.log(item, index);
    // 按索引递增延迟，确保每次更新被单独处理
    setTimeout(() => {
        $w('#customElement1').setAttribute('data', index);
    }, index * 10);
})

2. 一次性传递所有数据（更高效）

如果业务允许，直接把所有需要的数据打包成字符串一次性传递，避免多次DOM操作：

var fetchedData = await fetchData();
// 将所有索引转为逗号分隔的字符串
const allIndices = fetchedData.map((_, idx) => idx).join(',');
$w('#customElement1').setAttribute('data', allIndices);

自定义元素中解析数据：

attributeChangedCallback(name, oldValue, newValue) {
    if(name === 'data') {
        const indices = newValue.split(',').map(Number);
        indices.forEach(idx => alert(idx)); // 逐个弹出1到11
    }
}
static get observedAttributes() {
    return ['data'];
}

内容的提问来源于stack exchange，提问作者Exit Code 1