强制javascript运行*之前*浏览器重绘（jsFiddle示例） [英] Force javascript to run *before* browser redraw (jsFiddle example)

问题描述

我正在使用HTML表来构建一个基于Web的小应用程序。这个表的一个不寻常的属性是它有固定的顶行和左列（类似于excel）。我使用一个小jQuery和CSS完成这个。

I am building a little web based application using an HTML table. One unusual property of this table is that it has fixed top row and left column (similar to excel). I accomplished this using a little jQuery and CSS.

问题是，触发我的代码的jQuery事件是$（窗口）.scroll事件，显然大多数浏览器（Chrome和IE）在此事件调用的代码完成运行之前重绘页面。因此，左列和顶行花了一分钟来赶上表的其余部分。

The problem is, the jQuery event that triggers my code is the $(window).scroll event, and evidently most browsers (Chrome and IE) redraw the page before the code that is called by this event is finished running. As a result, the left column and top row take a split second to "catch up" to the rest of the table.

我提供了一个剥离了jsFiddle示例为了向您展示我的问题。 注意：当表格如此之小，并且（相对来说）没有内容时，延迟不是很明显。不过，它是在那里（假设你不使用firefox）。有什么办法摆脱这种滞后吗？

I've provided a stripped down jsFiddle example in order to show you my problem. Note: The lag isn't very noticeable when the table is so small and (relatively speaking) empty of content. Nevertheless, it is there (assuming you aren't using firefox). Is there any way to get rid of this lag?

谢谢！

推荐答案

只是一个想法，但也许值得考虑：您可以尝试使用 requestAnimationFrame ，如本文（或以类似的方式）。这可能会平滑更新/滞后问题。

Just an idea, but maybe worth considering: You could try using requestAnimationFrame as described in this article (or in a similar way). That might smooth out the update/"lag" issues.

这篇关于强制javascript运行*之前*浏览器重绘（jsFiddle示例）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！