使用Worker子线程不阻塞处理数据

话接上文 顺嘴一提 因为业务场景中要使用到计算点位的重复数据(最low版 理想情况假设下GPS推送过来的点位 如果不动是完全一样的 但是实际场景中GPS即使不动 点位也会"飘" 不可能前后点位完全相同 所以这算是low逼版version0.1吧 后续点位推送过来在进行代码优化)
因为点位数据大 考虑到不阻塞主流程显示 采用了子线程异步加载 不耽误事 上代码~

    // 计算停留点点位 子线程计算
    const worker = new Worker();
    // 主线程给 worker 子线程发送数据
    ElMessage({
      message: "正在获取停留点终数据,请稍候",
      grouping: true,
      type: "warning",
      customClass: "command-message",
    });
    worker.postMessage({ trakCollection });
    // 打印其他点位
    // 主线程注册子线程的 postmessage 数据回调
    worker.onmessage = ({ data }: MessageEvent) => {
      try {
        // console.log("data.trakCollection",data)
        HBMap.drawOtherHistoryMarkers(data.trakCollection);
      } catch (err) {
        console.log(err);
      }
      setTimeout(() => {
        ElMessage({
          message: "获取停留点点位成功!",
          grouping: true,
          type: "success",
          customClass: "command-message",
        });
      }, 2000);
      // 主线程关闭 worker 子线程
      worker.terminate();
    };

// worker.js hook代码

import type { Coordinate } from "@/map";
import { ElMessage } from "element-plus";

self.onmessage = async ({ data }) => {
  const trakCollection = await handleCoordinateArr(data.trakCollection);
  self.postMessage({ trakCollection });
};

self.onerror = () => {
  // worker 线程发生了错误!
  ElMessage({
    message: "获取停留点终数据失败!",
    grouping: true,
    type: "error",
    customClass: "command-message",
  });
};

function handleCoordinateArr(arr: Coordinate[] = []): Promise<Coordinate[]> {
  const [start, ...args] = arr,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    [end, ...argss] = [...args].reverse(),
    pauseSet = new Set();
  return new Promise((reslove) => {
    arr.reduce(
      (prv: Coordinate[], cur: Coordinate) => {
        if (prv.some((t) => t.toString() === cur.toString())) {
          pauseSet.add(JSON.stringify(cur));
          prv.push(cur);
        }
        return prv;
      },
      [arr[0]]
    );
    reslove([
      start,
      ...Array.from([...pauseSet]).map((pause) => JSON.parse(pause as string)),
      end,
    ] as Coordinate[]);
  });
}
  //