使用JavaScript监视鼠标事件之间的时间间隔

我有一个图像，我想监控3个事件：

onmousedown

onmouseup

onmouseout

基本上，我必须控制onmousedown和onmousedup事件之间经过的时间：

<img id="protoImage" src="/path/to/img.png" onmousedown="tsMouseDown()" onmouseup="tsMouseUp()" onmouseout="tsMouseOut()" ondragstart='return false;'/>

如果我点击按钮的时间超过500毫秒，我应该执行一项任务，否则会执行另一项任务

这是我编写的Javascript代码：

var lastTime = 0;
var now = 0;
var tmptimer = 0;
var loopFlag = false;
var timeFlag = false;

function tsMouseDown()
{
  loopFlag = true;
  timeFlag = false;

  var div = document.getElementById("debugDiv");
  div.textContent = "tsMouseDown...";

  lastTime = new Date().getTime();
  var tmptimer = lastTime;

  while((loopFlag == true) && ((tmptimer - lastTime) <= 500))
  {
    tmptimer = new Date().getTime();
  }

  if((tmptimer - lastTime) >= 500)
  {
    timeFlag = true;
    div.textContent = "tsMouseDown ... 500 ms passed";
  }
}

function tsMouseUp()
{
  loopFlag = false;
  var div = document.getElementById("debugDiv");

  now = new Date().getTime();

  if(timeFlag == false)
    div.textContent = "tsMouseUp: " + (now - lastTime) + "< 500 ms";  
  else
    div.textContent = "tsMouseUp: " + (now - lastTime) + "> 500 ms";
}

function tsMouseOut()
{
  var div = document.getElementById("debugDiv");
  div.textContent = "tsMouseOut: 0";
}

var lastTime=0；
var现在=0；
var-tmptimer=0；
var loopFlag=false；
var-timeFlag=false；
函数tsMouseDown（）
{
loopFlag=true；
时间滞后=假；
var div=document.getElementById（“debugDiv”）；
div.textContent=“tsMouseDown…”；
lastTime=新日期（）.getTime（）；
var tmptimer=最后一次；
而（（loopFlag==true）和（（tmptimer-lastTime）=500）
{
时间滞后=真；
div.textContent=“tsMouseDown…通过500毫秒”；
}
}
函数tsMouseUp（）
{
loopFlag=false；
var div=document.getElementById（“debugDiv”）；
现在=新日期（）.getTime（）；
if（timelag==false）
div.textContent=“tsMouseUp:”+（现在-上次）+“<500毫秒”；
其他的
div.textContent=“tsMouseUp:+（现在-上次）+>500毫秒”；
}
函数tsMouseOut（）
{
var div=document.getElementById（“debugDiv”）；
div.textContent=“tsMouseOut:0”；
}

但是while循环似乎从未中断过，即使我松开鼠标按钮，因为经过的时间值始终大于500毫秒

我很困惑，我不知道如何解决这个问题，也因为JavaScript不是我最好的

如何修改代码以解决这种情况？

---

提前谢谢你。

像这样的东西可能会有帮助

var timer;
function tsMouseDown()
{
    timer = setTimeout( function(){
        div.textContent = "tsMouseDown ... 500 ms passed";
    }, 500 );
}
function tsMouseUp()
{
    clearTimeout( timer );
}