批量任务导致卡死？试试 requestIdleCallback 对任务进行拆分

// 生成点位，创建DOM自定义样式
genMarker(device) {
    const innerHTML = `
      <div class="camera"></div>
    `
    const size = [48, 49]
    const markerOffset = new AMap.Pixel(-size[0] / 2, -size[1] / 2)
    const marker = new AMap.Marker({
      position: device.lnglat,
      extData: device,
      size,
    })
    const container = document.createElement('div')
    container.className = 'map-marker'
    container.innerHTML = innerHTML
    marker.setContent(container)
    marker.setOffset(markerOffset)
    marker.selected = false

    return marker
}

const id = window.requestIdleCallback(
  (deadline) => {
    // 当前帧剩余时间大于0，或任务已超时
    if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
      // do something
      console.log(1);
    }
  },
  { timeout: 2000 }
); // 指定超时时间

// window.cancelIdleCallback(id) 与定时器类似，支持取消

function singleTask() {
  const now = performance.now();
  while (performance.now() - now < 0.001) {} // 模拟耗时操作，每次任务耗时约0.001ms
}

const data = new Array(20000).fill(1);

function normarlRun() {
  for (let i = 0; i < data.length; i++) {
    // 2w个任务连续执行
    singleTask(data[i]);
  }
  result("done");
}

function ridRun() {
  let i = 0;
  let option = { timeout: 200 }; // 任务超时时间

  function handler(idleDeadline) {
    // 每次执行任务前，判断当前帧是否还有空闲时间
    while (
      (idleDeadline.timeRemaining() > 0 || idleDeadline.didTimeout) &&
      i < data.length
    ) {
      // 当前帧有剩余时间，或任务已等待超时强制执行
      singleTask(data[i++]);
    }

    // idleDeadline.timeRemaining() === 0 当前帧已没有空闲时间，让出主线程

    if (i < data.length) {
      window.requestIdleCallback(handler, option); // 任务未执行完，继续等待下次空闲时间执行
    } else {
      result("done");
    }
  }

  window.requestIdleCallback(handler, option);
}

const genId = (function () {
  let id = 0;
  return function () {
    return ++id;
  };
})();

const idMap: {
  [key: number]: number,
} = {};

const _requestIdleCallback: (
  cb: (idleDeadline: IdleDeadline) => void,
  options?: { timeout: number }
) => number = function (cb, options) {
  const channel = new MessageChannel();
  const port1 = channel.port1;
  const port2 = channel.port2;
  let deadlineTime: number; // 超时时间
  let frameDeadlineTime: number; // 当前帧的截止时间
  let callback: (idleDeadline: IdleDeadline) => void;

  const id = genId();

  port2.onmessage = () => {
    const frameTimeRemaining = () => frameDeadlineTime - performance.now(); // 获取当前帧剩余时间
    const didTimeout = performance.now() >= deadlineTime; // 是否超时

    if (didTimeout || frameTimeRemaining() > 0) {
      const idleDeadline = {
        timeRemaining: frameTimeRemaining,
        didTimeout,
      };
      callback && callback(idleDeadline);
    } else {
      idMap[id] = requestAnimationFrame((timeStamp) => {
        frameDeadlineTime = timeStamp + 16.7;
        port1.postMessage(null);
      });
    }
  };

  idMap[id] = window.requestAnimationFrame((timeStamp) => {
    frameDeadlineTime = timeStamp + 16.7; // 当前帧截止时间，按照 60fps 计算
    deadlineTime = options?.timeout ? timeStamp + options.timeout : Infinity; // 超时时间
    callback = cb;
    port1.postMessage(null);
  });

  return id;
};

const _cancelIdleCallback = function (id: number) {
  if (!idMap[id]) return;
  window.cancelAnimationFrame(idMap[id]);
  delete idMap[id];
};

export const requestIdleCallback =
  window.requestIdleCallback || _requestIdleCallback;
export const cancelIdleCallback =
  window.cancelIdleCallback || _cancelIdleCallback;

addMarkersByRid() {
    cancelIdleCallback(this.ridId)
    const { markerList, points, genMarker, genCluster } = this
    let index = 0
    const ridOption = { timeout: 20 }
    const handler = (idleDeadline) => {
      const { timeRemaining } = idleDeadline
      // 只在空闲时间生成点位
      while (timeRemaining() > 0 && index < points.length) {
        const device = points[index]
        const marker = genMarker(device)
        markerList.push(marker)
        index++
      }
      if (index < points.length) {
        this.ridId = requestIdleCallback(handler, ridOption)
      } else {
        console.log('done') // 全部点位生成完毕
      }
    }
    this.ridId = requestIdleCallback(handler, ridOption)
}