如何在操纵杆不动的情况下发送数据？

Question

我正在做一个有操纵杆的小网页，当操纵杆移动时，我想给websocket服务器发送一条消息。要创建操纵杆，我将使用nipple.js。

当操纵杆到达边界，它停止移动并发出move事件时，我遇到了一个问题，我想继续用操纵杆的方向向websocket发送消息。

基本上，操纵杆是用来移动一个字符是在服务器上，如果用户持有操纵杆的范围以外的乳头，那么我仍然想捕捉事件，并通过websocket发送它。

我尝试了几种不同的方法，但没有成功。

let manager = nipplejs.create(options);

manager.on("move", () => {
  console.log("moved");
});

在上面的例子中，如果您在某个点持有操纵杆，那么它将停止发出事件。

​

const manager = nipplejs.create({
  zone: document.getElementById("container"),
  color: "rgb(14 116 144)"
});

manager.on("move", () => {
  console.log("moved");
});

#container {
  height: 200px;
  width: 200px;
  background-color: rgb(203 213 225);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.10.0/nipplejs.min.js"></script>

<div id="container"></div>

​

Answer 1

这似乎不是一个事件，但也许这可以帮助你。

其思想是使用move事件来设置位置数据。然后使用start，这个间隔将持续发送数据，直到用户释放操纵杆(end事件)。

​

const manager = nipplejs.create({
  zone: document.getElementById("container"),
  color: "rgb(14 116 144)"
});

let pos = {};
let interval;

manager.on("move", (evt, data) => {
  pos = data.position;
});

manager.on("start", () => {
  interval = setInterval(() => {
    console.log(pos);
  }, 100)
})
manager.on("end", () => {
  clearInterval(interval);
})

#container {
  height: 200px;
  width: 200px;
  background-color: rgb(203 213 225);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.10.0/nipplejs.min.js"></script>

<div id="container"></div>

​