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

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，如果你安排一个 1ms 的回调，在五次回调之后，浏览器应该限制它并让它等待至少 4ms。¹)

只需记录 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;
}

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

A timer that measures length of mouse click

javascript

p5.js