js实现等待

实现等待的几种方法

使用 setTimeout 或 setInterval 进行延迟执行

setTimeout(() => {
  console.log('延迟1秒后执行');
}, 1000);

利用 Promise 和 async/await 实现异步等待

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedAction() {
  await wait(2000);
  console.log('等待2秒后执行');
}

使用 requestAnimationFrame 实现动画等待

function waitForAnimation(callback) {
  requestAnimationFrame(() => {
    requestAnimationFrame(callback);
  });
}

等待条件满足的实现

轮询检查条件

function waitUntil(condition, interval = 100) {
  return new Promise(resolve => {
    const check = () => {
      if (condition()) {
        resolve();
      } else {
        setTimeout(check, interval);
      }
    };
    check();
  });
}

使用 MutationObserver 等待DOM变化

function waitForElement(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve();
    }

    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

高级等待模式

实现可取消的等待

function cancellableWait(ms) {
  let timeoutId;
  const promise = new Promise(resolve => {
    timeoutId = setTimeout(resolve, ms);
  });

  return {
    promise,
    cancel: () => clearTimeout(timeoutId)
  };
}

等待多个异步操作完成

async function waitForAll(promises) {
  await Promise.all(promises);
  console.log('所有异步操作已完成');
}