获得鼠标保持时间的更好方法是什么？答案

【问题标题】：What is the better way to get mouse hold time?获得鼠标保持时间的更好方法是什么？
【发布时间】：2013-10-05 18:26:57
【问题描述】：

我正在尝试计算玩家按住鼠标按钮的时间。我试过了，但没有用：

var Game = cc.Layer.extend({
    count: false,
    countTimer: null,

    init: function () {
        var selfPointer = this;

        this.canvas.addEventListener('mousedown', function(evt) {
            selfPointer.count = true;
            selfPointer.countTimer = window.setTimeout(selfPointer.Count(), 1);
        });

        this.canvas.addEventListener('mouseup', function(evt) {
            selfPointer.count= false;
            window.clearTimeout(selfPointer.countTimer);
        });
    },

    Count: function() {
        if (this.count)
        {
            window.setTimeout(this.Count(), 1);
        }
    }

这是我的代码的一部分（为简洁起见），如果玩家按住按钮，我想在任何 1 毫秒内执行一个动作。

此外，这行不通，我认为这比我的方法更好。有什么想法吗？

【问题讨论】：

js 时钟通常比 1ms 长很多，所以你不能经常执行代码。 10ms 仍然是 1/100 秒，大约是间隔和超时的最小粒度。我相信 IE 是 11.4 毫秒，而 chrome 接近 8 毫秒。对于大多数游戏来说，即使是 12 毫秒的间隔也足够了；能够达到 ~90FPS。
@dandavis 很好的信息！不知道。谢谢

标签： javascript cocos2d-iphone cocos2d-html5

【解决方案1】：

您为什么对这个简单的任务使用超时？您可以获取 mousedown 时间、 mouseup 时间并计算它们的差异。无论如何，浏览器中的计时器分辨率小于 1ms。阅读 Nickolas Zakas 的this article，了解有关时间分辨率的更多信息。

代码是：

var Game = cc.Layer.extend({
  init: function () {
    var holdStart = null,
        holdTime = null;

    this.canvas.addEventListener('mousedown', function(evt) {
      holdStart = Date.now()
    });

    this.canvas.addEventListener('mouseup', function(evt) {
      holdTime = Date.now() - holdStart;
      // now in holdTime you have time in milliseconds
    });
}

【讨论】：

holdTime 应该是holdTime = Date.now() - holdStart;

【解决方案2】：

如果您的目标是兼容 HTML5 的较新浏览器，您可以使用网络工作者来完成此类任务。只需在鼠标按下时向网络工作者发布消息即可启动计时器。 Web Worker 可以每 1 毫秒发回一条消息以触发您在游戏中的操作，然后在释放鼠标时，向 Web Worker 发送另一条消息，告诉它停止。

这里只是一个简单的例子，说明它是如何工作的。您需要从本地服务器运行才能让网络工作者正常工作。

Game.js

function start() {              
    var worker = new Worker("ActionTrigger.js");
    worker.addEventListener('message', function(objEvent) {
        console.log("Holding");
    });
    worker.postMessage("start");

    window.onmousedown = function() {
        console.log("Mouse press");
        worker.postMessage("startTrigger");
    }

    window.onmouseup = function() {
        console.log("Mouse release");
        worker.postMessage("endTrigger");
    }
}

ActionTrigger.js

var trigger = false;
var interval = 1;

self.addEventListener('message', function(objEvent) {
    if(objEvent.data == 'startTrigger')
        trigger = true;
    else if(objEvent.data == 'endTrigger')
        trigger = false;
    else if(objEvent.data == 'start')
        timerCountdown();
});

function timerCountdown() {
    if(trigger)
        postMessage("");
    setTimeout(timerCountdown,interval);
}

【讨论】：

【解决方案3】：

你可以使用这样的东西： http://jsfiddle.net/yE8sh/

//Register interval handle
var timer;
$(document).mousedown(function(){
    //Starts interval. Run once every 1 millisecond
    timer=self.setInterval(add,1);
});
$(document).mouseup(function(){
   //Clears interval on mouseup
   timer=window.clearInterval(timer);
});

function add(){
  //The function to run
  $("body").append("a");
}

【讨论】：