使用getBoundingClientRect计算的总和无法存入变量div1x问题求助

你的问题核心是异步执行顺序导致的：

• setTimeout的回调函数是异步执行的，会在2秒后才运行，而你初始化的div1x = 0是同步完成的赋值。
• 如果你在setTimeout回调执行之前就去读取div1x，拿到的必然是初始值0，哪怕回调里的计算逻辑完全正确。

解决方法 #

1. 在回调内部使用计算后的值
   所有依赖div1x的逻辑，必须放在setTimeout的回调函数里面，或者在回调执行完成后再触发：

var finalProductDiv;
var workingsDiv;
var div1x = 0;

setTimeout(function(){ 
   finalProductDiv = document.getElementById('contentContaineriFrame').contentWindow.document.getElementById('finalProduct');
   workingsDiv = document.getElementById('contentContaineriFrame').contentWindow.document.getElementById('workings');
   div1x = finalProductDiv.getBoundingClientRect().left + finalProductDiv.getBoundingClientRect().width/2;
   // 在这里使用div1x，比如打印或调用相关逻辑
   console.log(div1x); // 此处会输出正确的353
 }, 2000);

2. 替换固定延迟为iframe加载事件（更可靠）
   固定2秒延迟不可靠，iframe可能加载更快或更慢。建议监听iframe的load事件，确保内容完全加载后再获取元素：

var iframe = document.getElementById('contentContaineriFrame');
iframe.addEventListener('load', function() {
   var finalProductDiv = iframe.contentWindow.document.getElementById('finalProduct');
   var div1x = finalProductDiv.getBoundingClientRect().left + finalProductDiv.getBoundingClientRect().width/2;
   console.log(div1x); // 输出正确的计算值
});

内容的提问来源于stack exchange，提问作者user1951962