JS异步事件同步

import {onMounted, ref} from "vue";
let queue = Promise.resolve(); // 初始化为已解决的Promise
let globalVar = 0; // 假设这是你的全局变量

function updateGlobalVar(increment:number,time:number) {
  return new Promise((resolve, reject) => {
    // 模拟异步请求
    setTimeout(() => {
      globalVar += increment;
      console.log(`GlobalVar updated to: ${globalVar}`);
      resolve("");
    }, time); 
  });
}

function handleClick(increment:number,time:number) {
  queue = queue.then(() => updateGlobalVar(increment,time));
}

onMounted(()=>{
  //使用休眠时间来模拟异步耗时，哪怕异步耗时不一样，结果也是按照代码的调用顺序执行（如果不做任何同步才做，以下代码结束的顺序应该是3、2、1）
  handleClick(1,5000)
  handleClick(2,4000)
  handleClick(3,3000)
})