如何在非常简短和精确的时间内展示某些东西答案

【问题标题】：How to show something for a very brief and precise amount of time如何在非常简短和精确的时间内展示某些东西
【发布时间】：2016-07-17 00:02:49
【问题描述】：

我正在开发一个非常类似于游戏的 Web 应用程序，有一个特殊要求让我抓狂：我必须显示一个非常短的图像（几百毫秒，有时甚至只有 25 毫秒，刚好够用户在他/她已经知道要寻找什么时感知某物）。此应用程序必须在 Chrome、Firefox 和 IE9+ 上运行，也可以在 Android 平板电脑和 iPad 上运行。

我发现在桌面浏览器中执行此操作的唯一可靠方法是 Flash。在许多计算机中使用 Javascript 和 html5 画布会导致项目甚至无法呈现。另一方面，Flash 不能在 iPad 和一些 Android 上运行，但在这些设备中，我们的测试表明，javascript 方式似乎工作得很好。所以这是我找到的最佳解决方案：grosso modo，if iPad then load_javascript_version() else load_flash_version()。

你以前见过这样的事情吗？我应该放弃寻找更易于维护的解决方案的希望吗？

非常感谢。

【问题讨论】：

浏览器中的javascript本质上是单线程的，这意味着当前正在执行的事情会运行到完成。永远无法保证 IE 计时的东西。

标签： javascript html ipad web

【解决方案1】：

没有尝试过这个特殊的用例，但是像KineticJS 这样的2D library 应该能够满足您的需求。

【讨论】：

【解决方案2】：

有 jQuery 函数，例如 timeout:http://www.jquery4u.com/jquery-functions/settimeout-example/ 和 delay:http://api.jquery.com/delay/

【讨论】：

【解决方案3】：

您是否在游戏循环中使用 RequestAnimationFrame？如果没有，请阅读它并确保在您尝试渲染时预加载您的图像。

Mozilla dev RAF api

大多数支持硬件加速画布的设备和浏览器应该能够达到 60 fps 的速度，这意味着您将能够显示单帧或大约 16.7 毫秒的图像。

我已经设法使用 createjs 库来做类似的事情，该库可以很容易地设置为使用 RequestAnimationFrame api。

Createjs ticker RAF

【讨论】：