JSON.stringify阻塞UI改用setTimeout后UI显示空值的解决问询

核心问题 #

你的代码里，jsonstringify()函数通过setTimeout异步执行JSON.stringify，但函数本身同步返回初始的空字符串，导致ngx-codemirror绑定的是空值，所以UI显示为空。另外，模板中直接调用函数作为ngModel数据源，会在每次变更检测时重复执行，逻辑混乱且效率低下。

解决方案 #

我们需要把异步处理逻辑移到弹窗打开的流程中，用变量存储最终的JSON字符串结果，再绑定到编辑器上。如果是超大体积的JSON，推荐用Web Worker处理，彻底避免阻塞主线程。

修改后的TS代码

// 新增变量存储字符串化后的JSON结果
jsonResult: string = '';

handleJsonViewerOpen(): void {
  this.jsonView = true;
  this.loading = true;
  this.showMonacoEditor();
  // 启动JSON字符串化任务
  this.processJsonStringify();
}

showMonacoEditor(): void {
  setImmediate(() => {
    setTimeout(() => {
      this.showEditor = true;
      this.cdr.detectChanges();
    }, 300);
  });
}

processJsonStringify(): void {
  // 用setTimeout让主线程先处理UI渲染，避免阻塞
  setTimeout(() => {
    try {
      this.jsonResult = JSON.stringify(this.data, null, '\t');
    } catch (e) {
      this.jsonResult = 'JSON格式化失败: ' + e.message;
    } finally {
      this.loading = false;
      this.cdr.markForCheck();
    }
  }, 0);

  // --- 如果是超大JSON，推荐用Web Worker替代上面的setTimeout ---
  // const worker = new Worker('json-stringify.worker.ts');
  // worker.postMessage(this.data);
  // worker.onmessage = (e) => {
  //   this.jsonResult = e.data;
  //   this.loading = false;
  //   this.cdr.markForCheck();
  //   worker.terminate();
  // };
  // worker.onerror = (e) => {
  //   this.jsonResult = 'JSON格式化失败: ' + e.message;
  //   this.loading = false;
  //   this.cdr.markForCheck();
  //   worker.terminate();
  // };
}

修改后的HTML代码

<button
  id="btnGetJson"
  pButton
  icon="fa fa-file-code-o"
  pTooltip="Json Viewer"
  tooltipPosition="bottom"
  class="p-button-secondary"
  (click)="handleJsonViewerOpen()"
></button>
<p-dialog
  [(visible)]="jsonView"
  header="Json Viewer({{ header }})"
  positionTop="0"
  styleClass="custom-dialog"
  responsive="true"
  [closable]="false"
>
  <loader [visible]="loading" *ngIf="!jsonViewerLoader"></loader>
  <div *ngIf="showEditor">
    <!-- 直接绑定到jsonResult变量 -->
    <ngx-codemirror [ngModel]="jsonResult" [options]="editorOptions"> </ngx-codemirror>
  </div>
  <!-- ... -->
</p-dialog>

关键说明 #

1. 异步逻辑调整：把JSON字符串化的逻辑从模板调用的函数中移出，放到弹窗打开时启动的异步任务里，确保任务完成后再更新绑定的变量。
2. 变量绑定替代函数调用：模板直接绑定jsonResult变量，避免变更检测时重复执行字符串化逻辑，同时保证UI能拿到正确的结果。
3. Web Worker优化：如果你的this.data体积很大，JSON.stringify会占用大量主线程时间，用Web Worker在后台线程处理，能完全避免UI阻塞，注释部分提供了实现示例。

内容的提问来源于stack exchange，提问作者Askyy