JavaScript - 在 setTimeout 之后根据值执行任务

JavaScript - execute a task after setTimeout depending on a value

本文关键字：执行任务 之后 setTimeout JavaScript      更新时间：2023-09-26

嗨，必须执行两个不同的任务（执行PHP文件），具体取决于我离开鼠标按钮在图像上单击的时间。我正在处理的事件是 onmousedown 和 onmouseup。

如果 t <500 毫秒，则执行任务 #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 在超时之前执行。

解决这种情况的更好方法是什么？我必须如何更改我的代码才能使其工作？

提前谢谢你。

更清楚一点的是将事件相互绑定..例如：

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来演示。

相关文章：