草庐IT

javascript - 带断点的秒表加起来不正确

coder 2024-07-15 原文

我有一个主秒表，每步有 4 个迷你秒表。完成时间后，这里是计时器的外观示例:

MAIN:  00 : 14 : 57
-------------------
MINI1: 00 : 04 . 17
MINI2: 00 : 06 . 40
MINI3: 00 : 02 . 54
MINI4: 00 : 01 . 46

迷你计时器应该与主计时器相加，就像他们在本例中所做的那样。使用我当前的计时器，它似乎总是延迟 .02 毫秒，因此它们加起来为 00 : 14 。 55 在这种情况下而不是 00 : 14 。 57。

这是一个JSFiddle我目前的计时器。我认为问题最有可能出现在 stopwatch.js 文件中，但我不确定为什么会这样，因为我使用的是 Date.now()来计算已经过去了多少时间。这是 stopwatch.js 文件，它是单个秒表的代码:

class Stopwatch {
  constructor (opts) {
    this.isOn = false;
    this.time = 0;
    this.elem = opts.elem;
  }

  start () {
    this.offset = Date.now();
    this.interval = setInterval(() => this._update(), 10);
    this.isOn = true;
  }

  stop () {
    clearInterval(this.interval);
    this.offset = null;
    this.interval = null;
    this.isOn = false;
  }

  reset () {
    this.time = 0;
    this._render();
  }

  _update () {
    this.time += this._getTimePassed();
    this._render();
  }

  _getTimePassed () {
    const now = Date.now();
    const timePassed = now - this.offset;
    this.offset = now;
    return timePassed;
  }

  _timeFormatter (milliseconds) {
    const padZero = (time) => `0${time}`.slice(-2);

    const minutes = padZero(milliseconds / 60000 | 0);
    const seconds = padZero((milliseconds / 1000 | 0) % 60);
    const centiseconds = padZero((milliseconds / 10 | 0) % 100);

    return `${minutes} : ${seconds} . ${centiseconds}`;
  }

  _render () {
    this.elem.textContent = this._timeFormatter(this.time);
  }
}

我在上面提到的 JSFiddle 和这个 gist 中都包含了所有内容如果这样更容易阅读。任何指导将不胜感激。

最佳答案

你说的是 20 毫秒的延迟，这可能是由多种原因造成的。

  • 正如 Flynn1179 所建议的，在对 Date.now()
    • 的调用之间可能存在
  • JavaScript 的 setInterval 漂移了!这是a bin to prove it .您真的不能指望在单线程上运行的语言能够非常准确地每 10 毫秒安排一次任务，而您的 _update 方法正是需要这样。
  • 您忽略了厘秒计数器中的 0-9 毫秒，这在主计时器中已计算在内。这可能是最大的影响因素。例如，假设迷你 watch A 为 15 毫秒，迷你 watch B 为 15 毫秒。迷你 watch A 会显示“01”，迷你 watch B 会显示“01”，但主 watch 会显示“03”，因为已经过了 30 毫秒。

为了正确解决这个问题，我建议重新设计您的解决方案，以便将所有秒表包装在 StopwatchManager 中，它会立即呈现所有秒表并计算主表的总时间添加迷你 watch 的时间。您可能还想研究使用 requestAnimationFrame 代替 setInterval 进行渲染。

关于javascript - 带断点的秒表加起来不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38287667/

秒表不正codethisjavascripttimerstopwatch

有关javascript - 带断点的秒表加起来不正确的更多相关文章

  1. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  2. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  3. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  6. ruby - 如何在 RVM 下将 Bundler 安装到 @global gemset，这是正确的方法吗 - 2

    我在OSX上(如果重要的话)。如果我使用RVM安装Ruby，它会默认将Bundler安装到@globalgemset假设我想要一个不同版本的bundler。我假设我需要做的就是执行geminstallbundler--version但是，这会将bundler安装到默认gemset并且RVM不会为其设置路径。因此，如果我键入bundler，它仍会启动一个与Ruby一起安装到@global中的bundler两个问题:如何将bundler安装到@globalgemset。将bundler安装到@globalgemset中的模式是否正确，或者我遗漏了什么 最佳答案

  7. ruby-on-rails - 如何正确格式化字符串，如 'mccdougal' 到 'McDougal' - 2

    什么Ruby或RailsDSL会将字符串"mccdougal"格式化为"McDougal"，同时留下字符串"McDougal"原样？将titleize传递给"McDougal"结果如下:"McDougal".titleize#=>"McDougal" 最佳答案 据我所知，没有可以处理这种情况的Rails助手。这是一个非标准的边缘案例，需要特殊处理。但是，您可以创建自定义字符串变形。您可以将这段代码放入初始化程序中:ActiveSupport::Inflector.inflections(:en)do|inflect|inflect.

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby-on-rails - 我如何告诉 Rails 如何正确地大写首字母缩写词？ - 2

    我的一个模型中有一个名为sui的字段。它代表“标准用户标识符”。当该字段出现验证错误时，Rails会打印“Suiisrequired”或“Suiisalreadytaken”。如何告诉Rails'sui'.titleize是“SUI”？我查看了Inflector.human，但这并不完全正确。 最佳答案 在这种情况下，我使用custom_err_msg插入。安装后，您可以提供如下自定义错误消息:validates_presence_of:sui,:message=>'^SUIisrequired'当您将^放在开头时，Rails不会输

  10. ruby-on-rails - 检查 Rails/Ruby 中对象是否存在的正确方法是什么？ - 2

    我有很多模型和关系。由于这个事实，在View/Controller中有很多调用，看起来像这样:@object.something.with_something.value链的某些部分最终可能为零，这完全没问题。检查终端对象是否存在的正确/干净/快速的方法是什么？正在调用类似的东西:@object.something.with_something.valueifdefined?@object.something.with_something.value还可以吗？ 最佳答案 在本地，您需要使用&&运算符(不是defined?)，但这很快

随机推荐