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

【问题标题】：Why doesn't the background color change first?为什么背景颜色不先改变？
【发布时间】：2022-01-24 15:55:29
【问题描述】：

'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);
});

我想先把bgcolor改成红色，然后得到sum函数的结果。

但是效果不好。

收到求和结果后，改变bg颜色。

我错过了什么？

【问题讨论】：

您阻塞了事件循环，因此在循环完成之前颜色不会改变。你可以在改变颜色后睡觉，让它有时间画画..
查看此问题以了解您的代码为何如此运作：Any example proving microtask is executed before rendering?
看成你没有使用promise的return，这里使用promise其实是多余的。我们是不是假设你已经把那一点留在了这里。

标签： javascript asynchronous promise

【解决方案1】：

我相信代码运行正常。但是，在设置了背景颜色之后，您会立即用一个极长的循环锁定处理器。浏览器在计算 1 到 10 亿的总和之前没有时间为背景着色。虽然背景颜色的属性将在函数之前设置，但实际重新渲染需要非零时间。

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

'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);
});

【讨论】：