Javascript RxJS等待两次单独的点击事件

我有一个按钮和一个图像

当我点击按钮时，我希望它进入某种“等待模式”。 等待两次单独的单击，这两次单击都返回鼠标单击事件的x，y值

我得到的鼠标xy部分没有问题，但在什么RxJS运营商下一步使用的损失

const elem = document.getElementById("MyImage");
const root = fromEvent(elem, "click");
const xy = root.pipe(map(evt => xyCartoPos(elem, evt)));
xy.subscribe(coords => console.log("xy:", coords));

function xyCartoPos(elem, e) {
  const elemRect = elem.getBoundingClientRect();
  return {
    x: e.clientX - elemRect.x - elemRect.width / 2,
    y: flipNum(e.clientY - elemRect.y - elemRect.height / 2)
  };
}

您可以使用将事件收集为数组，然后使用验证数组的长度为2：

const xy = root.pipe(
  map(evt => xyCartoPos(elem, evt)),
  scan((acc, evt) => {
    acc.push(evt);
    return acc;
  }, []),
  filter(events => events.length == 2),
);

这将导致在两次单击后，仅向订阅服务器发布包含两个鼠标事件的数组。

您可以使用将事件收集为一个数组，然后使用验证数组的长度为2：

const xy = root.pipe(
  map(evt => xyCartoPos(elem, evt)),
  scan((acc, evt) => {
    acc.push(evt);
    return acc;
  }, []),
  filter(events => events.length == 2),
);

这将导致在两次单击后，仅向订阅服务器发布包含两个鼠标事件的数组。

您可以使用一次发出固定数量的单击（在一个数组中）

const xy=root.pipe(
映射（evt=>xyCartoPos（元素，evt）），
缓冲计数（2），
//take（1）//如果只想发出一对单击，然后完成，请使用take（1）
);

您可以使用一次发出固定数量的单击（在一个阵列中）

const xy=root.pipe(
映射（evt=>xyCartoPos（元素，evt）），
缓冲计数（2），
//take（1）//如果只想发出一对单击，然后完成，请使用take（1）
);

这真是太好了！我不知道bufferCount。这真是太好了！我不知道bufferCount。