rxjs分时创建元素

今天遇到这样一个问题，在openlayer地图导入一个大的json文件，然后解析json，将里面的元素解析成js对象。少量的数据是没问题的，但一下子创建的js对象太多，就容易造成浏览器卡死的现象，如何解决呢？
其实很简单，就是利用分时创建的原理即可。rxjs给我们提供了很好用的工具，我们不必再自己写啦~~

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
import { take, map } from 'rxjs/operators';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() {
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    this.createMultiObject(arr, 1000);
  }
  // 分时创建元素
  createMultiObject(arr, time) {
    if (arr.length < 1){
      return;
    }
    const num = 2; // 每次取2个
    const count = Math.ceil(arr.length / num );//一共取多少次
    const source = interval(time).pipe(take(count), map(n => {
      console.log(n);
      return arr.splice(0, num);
    }));
    source.subscribe(items => {
      console.log(`每次创建${num}个元素>>>${items}`);
      if(arr.length === 0) {
        console.log('创建完毕');
      }
    });
  }

  ngOnInit(): void {
  }

}

这里主要体会一下操作符的组合使用，再就是splice函数可以改变数组本身的结构，可以每次切出一部分来创建，最后数组长度为0，表示创建完毕。