在警告之前执行JavaScript操作

Question

我想在按钮被点击时改变颜色并弹出消息提示。

function colorChange() {
  document.getElementById('word').style.color = "red";
  alert("color changed!");
}

我无法在警告框弹出时同时更改颜色。

- user5575144

---

将警报包装在超时中，它就会起作用，但是为什么需要它呢？你肯定不会使用警报来做任何事情吧？ - adeneo

我在确认这个问题之前会在提示框被回答后做些事情。谢谢 :) - user5575144

Answer 1

将警告信息包裹在一个超时函数内

function colorChange() {
  document.getElementById('word').style.color = "red";
  setTimeout(function() {
   alert("color changed!");
  },10)
}

<div id="word">
Word .....
</div>
<br />
<button onclick="colorChange()">
Change color
</button>

当弹出警告时，浏览器没有时间重新绘制屏幕。通过使用超时定时器，您可以将警告延迟到下一个时钟周期，这样就可以等待重绘完成后再弹出警告。

- adeneo

---

但它不会立即响应警告框。我的意思是，我将值10更改为1，但有时它不起作用。 - user5575144

@namnam0107 - 浏览器需要重新绘制的时间可能会有所不同，但据我所知，唯一的方法是延迟警报，给浏览器时间重新绘制，并等待0.010秒，这可能是你为此付出的代价。 - adeneo

那么，当我不停地按按钮时，有时颜色可能不会改变？ - user5575144

是的，这是一种可能性，如果浏览器没有时间在警报阻止它之前重新绘制页面，则会发生。除了增加超时时间外，没有其他办法可以解决这个问题。 - adeneo

没有使用async关键字，为什么它会像异步函数一样处理呢？作为单线程语言，我不明白为什么它会表现得像异步函数。如果有人能解释一下就好了。我不认为有一个关键字可以用来确保它不会以这种方式行事，类似于async但相反的关键字，因为硬编码的值，即使是一个很大的值，也不能保证样式会先完成。 - Michael Martell

Answer 2

更好的方法是使用Window.requestAnimationFrame()。

function colorChange() {
    document.getElementById('word').style.color = "red";
    window.requestAnimationFrame(() => 
        {window.requestAnimationFrame(()=>
            alert("color changed!");})
}

在下一次浏览器重绘之前调用requestAnimationFrame函数。这确保浏览器在弹出警告框之前会对其进行重绘。这比猜测下一次重绘前的秒数更好的实践方法。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

- Devin