浏览器"缓冲区"油漆/回流时的鼠标事件

时间:2013-03-15 10:18:02

标签: gwt browser user-input paint reflow

我正在创建一个GWT应用程序,我使用CellListListDataProvider显示元素列表。我想在每个Cell中显示的数据只包含两个字符串。我创建了一个从AbstractCell延伸的自定义单元格。为了创建我的自定义Cell,我使用了UIBinder并基于HTML创建了UI。每个单元格包含两个字符串和一个按钮。单击该按钮将从绑定列表中删除该元素。根据我的分辨率,大约有20个元素是可见的,所以我将页面大小设置为30,以便在用户想要向下滚动时有一点“缓冲区”。这里前三个元素如何:

http://imageshack.us/f/201/listox.png/

在tomcat上运行已部署的应用程序时没有问题。但是在开发模式下运行时,我在删除元素时发现了以下问题:

  • 我点击了第一个元素的“删除元素”按钮
  • 我第二次点击第一个元素的“删除元素”按钮(第一个元素仍然可见)
  • 第一个元素已从列表中删除
  • 第二个元素也从列表
  • 中删除

我尝试使用已部署的版本,但是我无法单击第一个元素的“删除元素”按钮两次,因为它被删除得太快了。所以我将显示的元素数量增加到500,这导致了同样的问题。 我切换到一个较慢的系统(AMD G-T40R,1GHz),同样的情况下,我将页面大小设置为50或更高。

为了进一步深入研究此问题,我添加了NativePreviewHandler,并在我的自定义Cell的ScheduleCommand方法中通过Scheduler.get().scheduleDeferred安排了onBrowserEvent,以查看发生了什么。结果如下(在开发模式下运行,Chrome 27.0.1438.7 dev-m,添加了检查订单的时间戳):

  • at 1363340977109 mousedown(在第一个元素的“删除元素”按钮上)
  • at 1363340977206 mouseup(在第一个元素的“Remove element”按钮上)
  • 点击1363340977225(在第一个元素的“删除元素”按钮上)

  • at 1363340981341 schedule in onBrowserEvent

  • at 1363340981366 mousedown(与第一次点击位置相同,但现在位于第二个元素的“删除元素”按钮上,因为第一个元素被删除了)

  • at 1363340981386 mouseup(在第二个元素的“Remove element”按钮上)
  • 点击1363340981394(在第二个元素的“删除元素”按钮上)

  • at 1363340985184 scheduleDeferred in onBrowserEvent

这里的问题是:第二次点击是以某种方式“缓冲”的,因为浏览器正在忙着呈现/(重新)绘制内容。有没有办法确定何时完成渲染或在浏览器忙时禁用用户输入?

我当前的解决方案/解决方法:删除元素时禁用按钮。因此忽略了点击次数。为了模拟浏览器完成渲染,我在ScheduleCommand执行后添加了一定的时间(~50ms)。然后我再次启用所有按钮。这暂时可以使用,但如果有一天浏览器缓冲输入超过50毫秒,问题就会再次发生。

0 个答案:

没有答案