RxJS 等待 2 个单独的点击事件

Question

我有一个按钮和一张图片。

当我单击该按钮时，我希望它转到某种 "wait mode"。分别等待两次点击，即return鼠标点击事件的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)
  };
}

Answer 1

您可以使用 scan to collect the events as an array, then use filter 来验证数组的长度是 2:

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

这将导致仅包含两个鼠标事件的数组在两次单击后发布给订阅者。

Answer 2

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

const xy = root.pipe(
  map(evt => xyCartoPos(elem, evt)),
  bufferCount(2),
  //take(1) // use take(1) if you only want to emit one pair of clicks and then complete
);

RxJS 等待 2 个单独的点击事件

RxJS wait for 2 separate clicks events

javascript

rxjs

mouseevent

dom-events