本文探讨了 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() 告诉浏览器希望执行一个动画，并在下一次重绘之前调用指定的函数。
结合 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 更新时机的情况下，这种技术非常有用。
以上就是JavaScript DOM 更新与视觉呈现延迟：优化用户体验的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519473.html
微信扫一扫 
支付宝扫一扫 
