我如何避免 UI 使用 RxJS 拖放应用程序的延迟

Question

https://codesandbox.io/s/pedantic-roentgen-s514z?file=/src/index.js

import "./styles.css";
import { fromEvent } from "rxjs";
import { switchMap, takeUntil } from "rxjs/operators";

let el = document.getElementById("box0");

const mousedown$ = fromEvent(el, "mousedown");
const mousemove$ = fromEvent(document, "mousemove");
const mouseup$ = fromEvent(document, "mouseup");

const drag$ = mousedown$.pipe(
  switchMap(() => mousemove$.pipe(takeUntil(mouseup$)))
);

drag$.subscribe((e) => {
  console.log(e);
  el.style.left = `${e.clientX}px`;
  el.style.top = `${e.clientY}px`;
});

注意到 UI 中的拖放效果在视觉上有些延迟。关于我使用响应式扩展的方式是否有任何反馈可能会导致这种情况？

Answer 1

您在此示例中使用 Rx 的方式没有任何问题。如果您想提高性能，只需删除 console.log 并可能使用 CSS translate 属性进行方形移动。

我如何避免 UI 使用 RxJS 拖放应用程序的延迟

How do i avoid UI delay in drag and drop app using RxJS

javascript

rxjs