为什么不先改变背景颜色？

Question

'use strict';

const sum = num => {
  let acc = 0;
  while (num) {
    acc = acc + num;
    num = num - 1;
  }
  return acc;
};

new Promise((res, reject) => {
  document.querySelector('body').style.backgroundColor = 'red';
  res();
}).then(() => {
  const res = sum(1000000000);
  console.log(res);
});

我想先把背景颜色改成红色，然后求和函数的结果。

但效果不佳。

收到求和结果后，更改背景颜色。

我错过了什么？

Answer 1

我相信代码工作正常。但是，在设置背景颜色后，您会立即用一个极长的循环锁定处理器。浏览器在冻结计算 1 到 10 亿的总和之前没有时间为背景着色。虽然属性背景颜色将在函数之前设置，但实际 re-rendering 需要 non-zero 时间。

您可以通过在承诺之前设置延迟来看到这一点 return。在这种情况下（或者至少在我的处理器上），背景会先变红。

'use strict';

const sum = num => {
  let acc = 0;
  while (num) {
    acc = acc + num;
    num = num - 1;
  }
  return acc;
};

new Promise((res, reject) => {
  document.querySelector('body').style.backgroundColor = 'red';
  setTimeout(res, 250);
}).then(() => {
  const res = sum(1000000000);
  console.log(res);
});

为什么不先改变背景颜色？

Why doesn't the background color change first?

javascript

asynchronous

promise