JavaScript-在setTimeout之后根據值執行任務

Question

嗨具有取決於我有多少時間t離開鼠標鍵點擊過的圖像來執行（執行PHP文件）兩個不同的任務。 我正在處理的事件是onmousedown和onmouseup 。

如果t <500 ms，則執行任務＃1，否則執行任務＃2。

因此，基於我的基本JavaScript知識，我編寫了以下代碼：

var lastTime = 0;
var now = 0;
var tmptimer = 0;
var mousedown = false;

/* to be executed from onmousedown event */
function tsMouseDown(angleH, angleV)
{
  var angleH2 = parseFloat(angleH);
  var angleV2 = parseFloat(angleV);
  var div = document.getElementById("debugDiv");
  div.textContent = 'tsMouseDown: ' + angleH + " - " + angleV + ' - ';

  mousedown = true;
  lastTime = new Date().getTime();
  tmptimer = setTimeout( function(){ ;}, 500);
  div.textContent = 'tsMouseDown: ' + angleH2 + " - " + angleV2 + ' - ' + tmptimer +  ' - ' + mousedown;

  /* 
     try to execute task #1 or #2 depending on mousedown value
     (!) DOES NOT WORK 
  */
  if(mousedown == false)
  {
    $("#content").load("task1.php",{ /* args here ... */ });
  } 
  else if(mousedown == true)
  {
    $("#content").load("task2.php",{ /* args here ... */ });
  }
}

/* to be executed from onmouseup event */
function tsMouseUp()
{
  mousedown = false;
  clearTimeout(tmptimer);
  tmptimer = -1;
  var div = document.getElementById("debugDiv");

  now = new Date().getTime();

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

該代碼可以很好地識別鼠標按鈕保持單擊的時間，但是我從未希望評估tsMouseDown函數中mousedown變量的條件，因為總是執行task2.php ，即使在超時之前執行了tsMouseUp 。

解決這種情況的更好方法是什么？ 我必須如何更改代碼才能使其正常工作？

先感謝您。

Answer 1

更清楚的一點是將事件彼此綁定..例如：

var longTouch = false;
$(this).mousedown(function() {
    timeout = setTimeout(function() {
        longTouch = true;
    }, 500);
}).mouseup(function() {
    clearTimeout(timeout);
    if (longTouch && longTouch == true) {
        // do whatever you want if it was longer than 500ms
    } else {
        //else do click actions
    }          
});
longTouch = false;

這種圍繞mouseup事件的方法會中斷 mousedown或者如果它長於指定的時間間隔，則它將執行其他操作。 我希望它足夠清楚。

我做了一個jsFiddle來演示。