RxJS 等待 2 个单独的点击事件
RxJS wait for 2 separate clicks events
我有一个按钮和一张图片。
当我单击该按钮时,我希望它转到某种 "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)
};
}
您可以使用 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),
);
这将导致仅包含两个鼠标事件的数组在两次单击后发布给订阅者。
您可以使用 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
);
我有一个按钮和一张图片。
当我单击该按钮时,我希望它转到某种 "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)
};
}
您可以使用 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),
);
这将导致仅包含两个鼠标事件的数组在两次单击后发布给订阅者。
您可以使用 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
);