Question

我正在前端使用Angle 7开发一个应用程序，并且我正在使用Angular拖放cdk。虽然拖动元素时我有一个必须执行的算法，但不幸的是此算法减慢了拖放速度，所以有进行这种处理并加快拖放速度的方法。通过调用方法，方法是在dragMove（event）方法中。

dragMove(event: CdkDragMove<Cycle>) {
    this.parentClientRect = event.source.getRootElement().parentElement.getBoundingClientRect();
    this.clientRect = event.source.element.nativeElement.getBoundingClientRect();
    this.leftPosition =
        this.clientRect.left - this.parentClientRect.left - ((this.clientRect.left - this.parentClientRect.left) % ConstantesGda.STEP);
    if (this.leftPosition < 0) {
        this.leftPosition = 0;
    }
    event.source.element.nativeElement.style.transform = `translate3d(${this.leftPosition}px, 0px, 0px)`;
this.callAlgo();
}

Answer 1

如果您运行的算法需要一些CPU并且可以冻结UI，则可以将其分成几部分，并使用setTimeout将其排队。例如，如下所示：

function heavyProcess(params) {
  for (let i=0;i< 1000; i++) {
     doSomething(params[i]); //needs 0.005 secs
  }
}

这会使浏览器在约0.005 * 1000 = 5秒内无响应，但可以将其重构为以下内容：

function heavyProcess(params) {
  for (let i = 0; i < someSize; i++) {
     setTimeout(()=>doSomething(params[i]));
  }
}

因此，现在您有1000个要处理的小功能排队，并且可以在其中两个中间处理事件。

角度拖放性能

1 个答案: