javascript - JS/jQuery 同时按住 LMB 事件

Question

我正在 jQuery/JS 中做一些动画，我想根据是否按住 LMB(鼠标左键)来更改 Pull_Push 变量。

现在我正在寻找一个示例，但只找到了 .mousedown() 和 .mouseup() 事件，但它们似乎在按下/释放按钮时触发。 我需要两者之间的事件。 (按住时)

您可以查看complete Code on CodePen

这是我想我必须修复的部分:

var pull_or_push = "push";
$(document).on("mousedown", function () {
    var pull_or_push = "pull";
});
$(document).on("mouseup", function () {
    var pull_or_push = "push";
});

你认为有什么可能的方法来实现我想要的吗？

Answer 1

考虑使用requestAnimationFrame在一个时间间隔内有效地运行代码。使用 setInterval 或 setTimeout 也可以，但 requestAnimationFrame 是专门为这种事情而设计的。

在下面的示例中，doSomething 函数仅在调用 mousedown 后开始运行，然后在调用 mouseup 后停止运行。但是您可以轻松地通过在这些事件之外调用 doSomething 函数来使代码始终运行。这样，只需检查 pull_or_push 的状态，您就可以在按下 LMB 时执行某些操作，并在未按下 LMB 时执行其他操作。

另请注意，在 mouseup 和 mousedown 回调中，您重新声明了 pull_or_push 而不是修改全局变量(只需删除 var)。

var pull_or_push = "push";
var request;

$(document).on("mousedown", function () {
    pull_or_push = "pull";
    doSomething();

});
$(document).on("mouseup", function () {
    pull_or_push = "push";
    cancelAnimationFrame(request)
});

function doSomething(dt){
  console.log("Doing something")
  request = requestAnimationFrame(doSomething)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>