时间戳

首页 > 解决方案 > 如何在 Javascript 中管理异步鼠标事件

javascript - 如何在 Javascript 中管理异步鼠标事件

问题描述

我有 JavaScript 代码，其中：

这两个事件是异步触发的。

例如，mouseup事件可以在mousedown事件触发后（短鼠标单击），在OnMouseDown结束之前立即触发。（图1）

我想按顺序处理事件，其中函数OnMouseUp只会在结束后OnMouseDown开始。

我可以通过防止mouseup事件在结束后触发（通过在开始时OnMouseDown调用）来实现这一点（ ）removeEventListener('mouseup', OnMouseUp)OnMouseDownFigure2

但是我可能会mouseup完全失去一个事件（Figure3）

图3 -mouseup事件丢失

我正在寻找一种方法来确保

活动时序图 我怎样才能做到这一点？

以下代码示例演示了该问题：

function sleep1 () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve("Finished sleeping");
    }, 2000);
  });
}

// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
document.addEventListener('mousedown', async function(e) {
    console.log('BEG OnMouseDown');
  let retval = await sleep1();
  console.log('retval: ', retval);
    console.log('END OnMouseDown');
});


// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
    console.log('BEG OnMouseUp');
    console.log('END OnMouseUp');
});

单击鼠标左键并松开，打印输出如下，显示函数 OnMouseUp 在函数 OnMouseDown 结束之前结束，与图 1 吻合。

BEG OnMouseDown
BEG OnMouseUp
END OnMouseUp
Inside OnMouseDown:  Finished sleeping
END OnMouseDown

标签： javascriptevents

解决方案

您可以尝试异步等待，定义一个异步函数然后在 mouswdown 事件上使用 await 关键字，它不会触发下一个事件，直到异步函数完成

推荐阅读