背景

实际场景中，需要同步执行多次，每次执行需要拿到上次的结果，充当本次的参数；在此基础上，既要满足自动实现，还要实现手动实现上面的效果。

方案

页面写两个button，给其绑定点击事件：

const begin = document.getElementById("begin");
const restart = document.getElementById("restart");

实现这么一个方法：

// 利用promise，将传进去的方法在promise里面执行，执行完，将结果返回，再用try catch包裹下，避免报错导致用额面崩掉
const handle = (callback) => {
  return new Promise((resolve, reject) => {
    try {
      const res = async () => {
        return await callback();
      };
      // 返回结果
      resolve(res);
    } catch (err) {
      reject(err, "failed");
    }
  });
};

模拟一个实际场景中的接口请求或异步等待操作

// 这个方法是模拟实际业务中的接口请求的，到时候替换成接口就好了
const test1 = (val, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("等到了", val);
    }, delay);
  });
};

使用：

let myRes;
let myRes2;

// 连续执行调用
begin.onclick = async function () {
  console.log("1--前");

  myRes = await handle(() => test1(11, 3000));
  console.log("1--后");

  console.log("12--前");
  // 单独点击这个方法，就是自动执行了
  myRes2 = await handle(() => test1(myRes, 5000));
  console.log("res3", myRes2);
  console.log("12--后");
};

// 手动续起来执行，点击完上面的 再点击这个，就相当于手动点击两次，但是效果是拿到了第一次返回的结果才执行这个里面的方法，虽然在点击的时候，上面的begin方法还没执行完，就点击了restart，但是还是实现了顺序同步等待
restart.onclick = async function () {
  console.log("2--前");

  const res3 = await handle(() => test1(myRes2, 5000));
  console.log("res3", res3);
  console.log("2--后");
};

以上便是小小的总结，如有更优雅的或者更完美的，欢迎探讨分享。

js顺序同步执行，本次执行需拿到上次的结果，可自动可手动

背景

方案