当手指在屏幕上而不抬起时，javascript动画在ios safari webkit浏览器中停止

Posted 2023-02-23

【中文标题】当手指在屏幕上而不抬起时，javascript动画在ios safari webkit浏览器中停止

【英文标题】：javascript animation halted in ios safari webkit browser when finger is on the screen without lifting

【发布时间】：2012-04-27 18:53:29

【问题描述】：

我有一个 webview，正在应用中显示 页面上有一个动画，一个数字计时器，我在其中显示每个数字的图像，例如 00:39、29:39 等

在页面内的 javascript 中使用 setInterval 进行动画处理 问题是当我将手指放在屏幕上时，即触摸而不抬起手指 浏览器停止，意味着动画不再动画，它在我的手指触摸屏幕时停止，并且在我抬起手指后它会继续动画

我该如何解决这个问题？ 我听说我可以使用 prevent default 方法，但这不会忽略我在页面上的所有事件吗？

基本上除了我网页中的计时器之外，我还有一些用户可以与之交互的东西，所以它正在寻找点击事件等。

所以我当然也想保留它 请帮忙

这发生在 ios 设备上......如果我在桌面浏览器中运行，一切似乎都很好......不会停止被观察

【参考方案1】：

仅适用于以后遇到此问题的任何人： 滚动时动画总是在网络浏览器中停止，这是您的网络视图通过手指触摸所期待的。 这也将发生在桌面浏览器上。

【参考方案2】：

如果您按任意位置或仅按柜台，它会停止吗？尝试防止点击计数器元素。比如..

$('#counter-container').click(function()

  e.preventDefault();

  return false;
);

编辑：显然这不是一个罕见的问题。当 iphone 需要更多 CPU/内存资源时，它将停止执行 javascript。研究使用 setInterval（以给定的时间间隔执行 javascript，直到调用 clearInterval()）来检测动画是否未成功完成。相关问题：User interaction sometimes screws up jQuery ajax requests in UIWebViewAJAX constantly look for server update? Javascripthttps://discussions.apple.com/thread/2723866?start=0&tstart=0

【讨论】：

谢谢先生，但是每当我将手指放在 web 视图的任何位置时，动画实际上都会停止，而不仅仅是动画容器，所以解决方案不起作用

再次感谢您的跟进，但我没有发出任何 ajax 请求，我正在制作一些简单的动画，我认为它不会窃取 cpu 资源等。您检查动画是否完成的解决方案不起作用，我的意思是，首先，我们不知道是什么导致动画停止，我真的怀疑这是因为 CPU。再次，我的动画在你抬起手指后恢复动画，动画是一个计时器，比如 10 秒限制，用户应该在那 10 秒内做 osthing，我不能重新动画，因为它会给用户超过 10秒做任务，这违反了规则。

@user1118019 你用的是什么具体的动画效果，你用的是jquery效果吗？如果是这样，请发布动画代码，我将在 webview 中进行测试。

【参考方案3】：

找到问题所在。 它与ajax请求或cpu无关 这是因为引入了一个微小的滚动。显然，如果您正在滚动或将要滚动，所有动画都将暂停。