Контролировать время между событиями мыши с JavaScript

Question

У меня есть изображение, для которого я хотел бы отслеживать 3 события:

1. OnMouseDown
2. OnMouseUp
3. onmouseout

В принципе, я должен контролировать время, прошедшее между onmo usedown и OnMouseUp события:

<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"; 
} 

Но кажется пока цикл не прерывается, даже если я отпустить кнопку мыши, так как значение времени, прошедшему всегда главным чем 500 мс ..

Я смущен, и я не знаю, как решить эту проблему, а также потому, что JavaScript не является моим лучшим ...

Как я могу изменить мой код, чтобы решить эту ситуацию? Спасибо заранее.

Answer 1

Нечто подобное могло бы помочь

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