在移动设备上滚动而不是在桌面上滚动的倒计时暂停

Posted 2023-03-14

【中文标题】在移动设备上滚动而不是在桌面上滚动的倒计时暂停

【英文标题】：Countdown pause on scrolling on mobile devices but not on desktop

【发布时间】：2014-03-29 08:50:01

【问题描述】：

我正在构建一个旨在在手机和桌面上运行的网络应用程序。该应用程序的一部分是测验。我在页面顶部有一个倒计时时钟，每次倒计时一秒。

window.setInterval(function () 
    console.log("THIS STOPS WHILE SCROLLING");
, 1000);

当用户在 android 和 ios 设备上触摸屏幕并按住时，此功能会暂停，然后在滚动或触摸完成/释放时恢复。

我需要时钟在用户触摸屏幕时不断更新和计数。我怎么做？我正在使用AngularJS。

【问题讨论】：

你可能不会喜欢这个但是：***.com/questions/11177774/…

有人声称它已在 iOS 6.1 中修复

这不仅适用于 iOS。据我了解，该问题/答案是关于不再在滚动时删除的计时器。 Android 中也在发生同样的事情。

哦，那我的错。我对此感到好奇并用谷歌搜索了一下，从阅读该问题/答案来看，这似乎与您的问题相同。

【参考方案1】：

您可以使用如下代码禁用触摸设备上的滚动：

var disableScroll = function (e) 
    if (yourAlarmIsRunning === true) 
        e.preventDefault();
    
;

document.body.addEventListener('touchstart', disableScroll, false);
document.body.addEventListener('touchmove', disableScroll, false);

由于听起来您只想在警报器正在运行时禁用它，因此请使用变量来跟踪它是否正在运行，如果是，则禁用滚动。

【讨论】：

感谢您的回答，但我需要能够滚动。当用户回答问题时，计时器将在屏幕顶部运行 45 分钟。他/她必须能够在屏幕上滚动。

@LuckyLuke 在这种情况下，不，没有办法做到这一点。滚动由浏览器处理，对于 JS 开发人员来说，内部发生的事情并没有向我们公开（在这种情况下，setIntervals 由于滚动而有趣地工作）

该死的。您是否知道在没有这些暂停的情况下在客户端跟踪时间的其他方法？这是一个测验，我需要知道用户花了多长时间。

当然。您可以使用增量计时。因此，当您的计时器启动时，您将Date.now() 存储在一个变量中。并且每当您的 setInterval 发生触发时，您都会从原始时间中减去 Date.now()。 A simple example here. 使用这个，你不依赖实际超时来判断已经过去了多少时间，你依赖实际时间。

【参考方案2】：

您可以使用一些“滚动”库来模拟原生滚动。这样，超时和间隔就不会暂停；）

我过去也遇到过同样的问题，这对我有用。

我不记得我到底使用了哪个库，但这样的东西可能会起作用：https://jamesflorentino.github.io/nanoScrollerJS/