本文探讨了 JavaScript 中 DOM 元素样式更新后，视觉呈现上可能存在的延迟问题。针对这一问题，我们提供了一种利用 requestAnimationFrame() 和 setTimeout() 组合的解决方案，确保样式更新在 alert() 函数调用前完成，从而避免用户体验上的不一致。同时，也讨论了避免使用固定延迟时间的必要性，以及该方案的优势。
在 JavaScript 中，修改 DOM 元素的样式并不总是立即反映在屏幕上。浏览器为了优化性能，通常会将多个 DOM 操作合并，并在下一个渲染周期统一更新。这种机制可能导致在某些情况下，代码已经执行了样式修改，但用户在视觉上尚未看到变化，尤其是在紧接着执行依赖于视觉效果的代码时，例如弹出 alert() 窗口。
考虑以下场景：一个 bookmarklet 监听 mousedown 事件，当点击文本元素时，改变其颜色并弹出提示框，最后恢复原始颜色。
document.addEventListener('mousedown', e => {
const element = document.elementFromPoint(e.clientX, e.clientY);
if (element /* is text */) { // 假设有 is text 的判断逻辑
const originalBackgroundColor = getComputedStyle(element).backgroundColor;
const originalColor = getComputedStyle(element).color;
element.style.backgroundColor = "yellow";
element.style.color = "black";
alert("some text");
element.style.backgroundColor = originalBackgroundColor;
element.style.color = originalColor;
}
})上述代码的问题在于，alert("some text") 可能会在浏览器完成颜色更新之前执行，导致用户看不到颜色的变化。
立即学习“Java免费学习笔记（深入）”；
一种常见的解决方案是使用 setTimeout() 函数添加延迟：
element.style.backgroundColor = "yellow";
element.style.color = "black";
setTimeout(() => {
alert("some text");
element.style.backgroundColor = originalBackgroundColor;
element.style.color = originalColor;
}, 20);虽然增加延迟可以解决问题，但使用固定的延迟时间（例如 20ms）存在以下缺点：
- 不确定性： 延迟时间可能不足以保证在所有设备和浏览器上都能正常工作。
- 性能影响： 过长的延迟会降低用户体验，使得操作响应迟缓。
更优雅的解决方案是利用 requestAnimationFrame() API。requestAnimationFrame() 告诉浏览器希望执行一个动画，并在下一次重绘之前调用指定的函数。
Hishop.5.2.BETA2版主要更新： [修改] 进一步优化了首页打开速度 [修改] 美化了默认模板 [修改] 优化系统架构,程序标签及SQL查询效率,访问系统页面的速度大大提高 [修改] 采用了HTML模板机制,实现了前台模板可视化编辑,降低模板制作与修改的难度. [修改] 全新更换前后台AJAX技术框架,提升了用户操作体验. 店铺管理 [新增] 整合TQ在线客服 [修改] 后台广告位增加
结合 requestAnimationFrame() 和 setTimeout()，可以确保样式更新在 alert() 调用之前完成：
document.addEventListener('mousedown', e => {
const element = document.elementFromPoint(e.clientX, e.clientY);
if (element /* is text */) { // 假设有 is text 的判断逻辑
const originalBackgroundColor = getComputedStyle(element).backgroundColor;
const originalColor = getComputedStyle(element).color;
element.style.backgroundColor = "yellow";
element.style.color = "black";
requestAnimationFrame(() => {
setTimeout(() => {
alert("some text");
element.style.backgroundColor = originalBackgroundColor;
element.style.color = originalColor;
}, 0);
});
}
})代码解释：
- 首先，修改元素的背景色和颜色。
- 然后，使用 requestAnimationFrame() 请求在下一次重绘之前执行一个函数。
- 在 requestAnimationFrame() 的回调函数中，使用 setTimeout() 将 alert() 的调用推迟到下一个事件循环。
工作原理：
requestAnimationFrame() 确保浏览器在执行 setTimeout() 之前至少进行一次重绘，从而保证样式更新在视觉上已经呈现。setTimeout(..., 0) 将回调函数放入事件队列，使其在当前执行栈清空后立即执行，即在浏览器完成重绘后立即调用 alert()。
总结：
通过结合 requestAnimationFrame() 和 setTimeout()，可以有效地解决 JavaScript 中 DOM 更新与视觉呈现延迟的问题，提供更流畅、更可靠的用户体验。这种方法避免了使用固定延迟时间带来的不确定性和性能问题，确保样式更新在依赖于视觉效果的代码执行之前完成。在需要精确控制 DOM 更新时机的情况下，这种技术非常有用。
