如何限制休息呼叫角度

Question

我正在使用 ng2-dragula 开发看板样式的拖放系统。 我有一个问题，我认为这是因为每次您将一个项目放到一个新位置时，它都会将数据发送到服务器并重做您可以拖动的整个项目列表。如果你做得足够快，你可以打破拖放循环。 有没有办法限制您可以进行 API 调用的时间间隔？与 RxJS debounceTime 类似，但由于列表几乎总是在变化，我无法通过管道将过滤器传递给它。

基本构造函数和拖拽事件订阅：

constructor(private dragulaService: DragulaService, ) {
    this.makeUndragabbles(); 
    this.subs.add(this.dragulaService.dropModel('cardList')
      .subscribe(({ item, target, source }) => {
        const dragObj: DragObject = {
          item: item,
          stageId: target['id'],
          name: this.pipelineConfig.name
        };
        this.modifyStage(dragObj);
        const drake = this.dragulaService.find('cardList').drake; //debug variable
        const sourceModel = drake.models[drake.containers.indexOf(source)]; //debug variable
      }));
  }

首先是为了制作不可拖动的项目，而不是更多：

private makeUndragabbles() {
    if (!this.dragulaService.find('cardList')) {
      this.dragulaService.createGroup('cardList',
        {
          copy: false,
          revertOnSpill: true,
          moves: (el, container, handle, sibling) => {
            return !el.classList.contains('nodrag');
          },
          isContainer: (el) => {
            return el.classList.contains('stage');
          }
        });
    }
  }

拖动项发射功能：

private modifyStage(draggedItem) {
    this.drag.emit(draggedItem);
  }

休息调用函数：

   private saveDraggedItem(pipelineType: string, statusChangeDTO: StatusChangeDTO) {
        if (pipelineType === 'dealStages') {
          this.dealService.savePipelineDealStageUsingPOST(statusChangeDTO).pipe(
            debounceTime(1000),
          )
            .subscribe(res => { }
              , (err) => this.error.emit(err)
              , () => { this.getAllDealsForPipeline(); });
        }
      }

发射数据缓存器：

  drag(draggedItem: DragObject) {
    if (draggedItem.item) {
      const statusChange: StatusChangeDTO = {
        id: draggedItem.item.id,
        newStatusId: +draggedItem.stageId
      };
      this.saveDraggedItem(draggedItem.name, statusChange);
    }
  }

Answer 1

这是一种可能的实现方式：

• 将drag 转换为EventEmitter，保持您的modifyStage 方法
• 创建一个destroy$Subject，它在ngOnDestroy中发射

然后在ngOnInit:

this.drag.pipe(
  takeUntil(this.destroy$),
  debounceTime(1000),
  filter(item => !!item.item)
  map(item => {
    const statusChange: StatusChangeDTO = {
      id: draggedItem.item.id,
      newStatusId: +draggedItem.stageId
    };
    return { name: item.name, status: statusChange }
  }),
  filter(data => data.name === 'dealStages'),
  concatMap(data => this.dealService.savePipelineDealStageUsingPOST(data.status))
  // depending on requirements, perhaps use switchMap or exhaustMap
).subscribe();

虽然这并不完全完整，但我认为它说明了我的方法。你怎么看？

Answer 2

由于整个过程使用了多个组件，因此我设法将其合二为一。 在@Will Alexander 和这篇文章的帮助下：debouncing EventEmitter

最终解决方案是：

subs = new Subscription();
debouncer = new Subject();

添加到构造函数中

this.subs.add(this.debouncer.pipe(
      debounceTime(500))
      .subscribe((val) => this.drag.emit(val)));

并在 ngOnDestroy 中取消订阅

 ngOnDestroy() {
    this.subs.unsubscribe();
  }