我如何能够为每秒更改文本的 javascript 添加时间?

问题描述

我希望这段代码从 0 数到 940(非常快)并在每次更新时更改文本

I would like this code to count up from 0 to 940 (very fast) and alter the text every time it updates

这是我的代码(在我的 head 标签内):

Here's my code (inside my head tag):

    <script type="text/javascript">
      function sleep(milliseconds) {
        const date = Date.now();
        let currentDate = null;
        do {
          currentDate = Date.now();
        } while (currentDate - date < milliseconds);
      }
      function onLoad(){
        var x = document.getElementById("numberID");
        var n = 940;
        var text = "";
        for(i = 0;i < n + 1;i++){
          text = i;
          x.innerHTML = text;
          sleep(1);
        }
      }
    </script>

目前，它只是等待一秒钟，然后在屏幕上显示940"并且不显示它.

At the moment, it just waits a second then displays '940' on screen and doesn't display it counting up.

任何帮助将不胜感激，谢谢！

Any help would be appreciated, thanks!

这是我最近输入的代码，仍然无效:

const x = document.getElementById("numberID");
      function newFrame(duration, start =  performance.now()) {
        requestAnimationFrame((now) => {
          const elapsed = now - start;
          x.innerText = Math.max(0, Math.min(duration,
          Math.round(elapsed)));
          if(elapsed < duration)
              newFrame(duration, start);
          })
        }
      }
      newFrame(940);

推荐答案

使用 while 循环来睡眠"会阻塞页面的线程，在此期间不会发生任何其他事情.这被认为是不好的做法.

Using a while loop to "sleep" is going to block the page's thread and nothing else can happen in the meantime. This is considered bad practice.

setTimeout 保证至少定义的时间已经过去，但可能需要(更多)更长的时间.这是不精确的，对于较短的间隔尤其不利.与 setInterval 相同.也不建议将它们用于涉及更新 DOM 的回调.

setTimeout guarantees that at least the defined time has passed, but can take (much) longer. This is imprecise, and especially bad for shorter intervals. Same with setInterval. They're also not recommended for callbacks that involve updating the DOM.

您需要做的是使用 requestAnimationFrame.

What you need to do is use a requestAnimationFrame.

function newFrame(duration, start =  performance.now()) {
  requestAnimationFrame((now) => {
    const elapsed = now - start
    console.log(`time passed: ${elapsed} ms`)
    if(elapsed < duration)
        newFrame(duration, start)
  })
}
newFrame(940)

在您的具体情况下，我将替换为教学目的而放在那里的 console.log 语句，内容如下:

In your specific case, I'd replace the console.log statement put there for didactic purposes, with something along the lines of:

x.innerText = Math.max(0, Math.min(duration, Math.round(elapsed)))

效果如下:

const x = document.getElementById("numberID")

function newFrame(duration, start =  performance.now()) {
  requestAnimationFrame((now) => {
    const elapsed = now - start
    x.innerText = Math.max(0, Math.min(duration, Math.round(elapsed)))
    if(elapsed < duration)
        newFrame(duration, start)
  })
}

newFrame(940)

<span id="numberID"></span>

这篇关于我如何能够为每秒更改文本的 javascript 添加时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！