js 延时执行代码的最佳实践 —— 自定义 sleep 函数

function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

async function test() {
  print("开始执行代码");
  // 使用 async/await 语法，参数为需要延迟的时间，单位为毫秒
  await sleep(1000);
  print("通过 sleep 延迟1秒后执行");
  print("结束执行代码");
}

test();

开始执行代码————当前时间：2024年5月23日9时50分15秒
通过 sleep 延迟1秒后执行————当前时间：2024年5月23日9时50分16秒
结束执行代码————当前时间：2024年5月23日9时50分16秒

async function test() {
  print("开始执行代码");

  await sleep(1000);
  print("通过 sleep 延迟1秒后执行");

  await sleep(1000);
  print("通过 sleep 又延迟1秒后执行");

  await sleep(1000);
  print("通过 sleep 再延迟1秒后执行");

  print("结束执行代码");
}

test();

开始执行代码————当前时间：2024年5月23日10时47分36秒
通过 sleep 延迟1秒后执行————当前时间：2024年5月23日10时47分37秒
通过 sleep 又延迟1秒后执行————当前时间：2024年5月23日10时47分38秒
通过 sleep 再延迟1秒后执行————当前时间：2024年5月23日10时47分39秒
结束执行代码————当前时间：2024年5月23日10时47分39秒

function print(info) {
  let dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours(); //获取时
  var m = dt.getMinutes(); //获取分
  var s = dt.getSeconds(); //获取秒
  let str =
    "当前时间：" +
    y +
    "年" +
    mt +
    "月" +
    day +
    "日" +
    h +
    "时" +
    m +
    "分" +
    s +
    "秒";

  console.log(info + "————" + str);
}

function test() {
  print("开始执行代码");

  setTimeout(() => {
    print("1秒的setTimeout");
  }, 1000);

  print("结束执行代码");
}

test();

开始执行代码————当前时间：2024年5月23日9时55分1秒
结束执行代码————当前时间：2024年5月23日9时55分1秒
1秒的setTimeout————当前时间：2024年5月23日9时55分2秒

function test() {
  print("开始执行代码");

  setTimeout(() => {
    print("1秒的setTimeout");
  }, 1000);

  setTimeout(() => {
    print("2秒的setTimeout");
  }, 2000);

  setTimeout(() => {
    print("3秒的setTimeout");
  }, 3000);

  print("结束执行代码");
}

test();

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() - start < delay) {
    continue;
  }
}

开始执行代码————当前时间：2024年5月23日10时9分29秒
通过 sleep 延迟1秒后执行————当前时间：2024年5月23日10时9分30秒
结束执行代码————当前时间：2024年5月23日10时9分30秒