javascript - 测量鼠标点击时间长度的计时器

Question

我使用可以从 vanilla js 找到的示例将其放在一起，因为我无法准确找到我需要的 p5 中已经完成的内容。

它正在做我想要它做的事情，即在 mousePressed 和 mouseReleased 之间给我一个时间。

问题:我的方法有效吗？在阅读有关计时器的其他评论后寻找一些专家建议...不希望计时器在后台运行，因为我没有正确处理它...

let timeTaken = 0;
let result = 0;
let timer;

function setup() {
  createCanvas(500,500);
}

function draw() {
  background('black');
  fill('white');
  textSize(15);  
  text("timeTaken: "+timeTaken,20,20);
  textSize(60);
  text(result,100,100);
}

function mousePressed() {
  result = 0;
  timeTaken = 0;
  if (timer) {
      clearInterval(timer);
  }
  timer = setInterval(()=>{timeTaken++;}, 1);  
}

function mouseReleased() {
  clearInterval(timer);
  result = timeTaken;
}

Answer 1

您根本不需要计时器，尤其是因为无法保证当您要求触发计时器时计时器会被触发。因此，如果您以 1 毫秒的间隔启动计时器，则在 10 毫秒的时间内可能只会调用它两到三次，因此最终计数为 2 或 3，而不是 10。(事实上，计时器为 clamped ，如果您安排 1 毫秒回调，则在五次回调后，浏览器应该限制它并使其等待至少 4 毫秒。

只需记录 mousedown 上的当前时间，然后用 mouseup 上的当前时间减去它，就可以知道鼠标按下的时间(以毫秒为单位):

let down;
let timeTaken = 0;

function mousePressed() {
  down = Date.now();
}

function mouseReleased() {
  timeTaken = Date.now() - down;
}

实例:

let down;
let timeTaken = 0;

function mousePressed() {
  down = Date.now();
}

function mouseReleased() {
  timeTaken = Date.now() - down;
}

const target = document.getElementById("target");
target.addEventListener("mousedown", mousePressed);
target.addEventListener("mouseup", function() {
  mouseReleased();
  console.log(`Time taken: ${timeTaken}ms`);
});

#target {
    user-select: none;
}

<div id="target">Click me<div>

---

¹ 关于夹紧，您可以在此处查看它的实际操作:

const now = typeof performance !== "undefined" && performance.now ? performance.now.bind(performance) : Date.now.bind(Date);
let last = now();
let counter = 0;
const entries = [];
const timer = setInterval(() => {
    const n = now();
    entries.push(n - last);
    last = n;
    if (++counter > 15) {
        clearInterval(timer);
        for (const entry of entries) {
            console.log(entry + "ms");
        }
    }
}, 1);

.as-console-wrapper {
    max-height: 100% !important;
}