Javascript没有立即更新网页/显得迟钝

Question

在网页上，我有一系列充当按钮的图像。当用户点击图像时，我通过javascript添加边框（向用户显示他们点击了图像），然后进行一些密集的客户端处理（向网格/表添加过滤器，并更新表格）。 / p>

即使我作为第一步向我的图像添加边框，但在应用过滤器/发生表更新之后，大约3-4秒后，它才会在视觉上发生变化。它就像边界更新被放入队列一样，并且在PC空闲之前不会被处理...因为相邻的'console.log'命令立即执行。

实际执行的代码是：

  console.log('Button number 4 processing');
  // Add the border to the button
  document.getElementById("img_es").style.border = "2px solid black";   

最终结果是系统对最终用户来说似乎很迟钝。

在其他系统/语言中，我可以告诉PC处理消息，即清空消息队列，这会导致屏幕更新。 Javascript / HTML中有什么可比的吗？

Answer 1

如果您执行大量触及DOM的操作，浏览器渲染引擎可能会被阻止。

在timeout()的帮助下，在很短的时间内延迟长时间运行的开始（让我们说50ms）：

 setTimeout(function(){ /* expensive calculations here */); }, 50);

或者您可以将图像包装在链接中并使用CSS伪类:active绘制边框，请参阅description。这应该异步工作。

 a img {
    border: 0;
 }

 a:active img {
    border: 2px solid black;
 }