当前位置：首页 > JavaScript

js实现等待效果

2026-03-01 02:44:36JavaScript

使用 setTimeout 实现延迟执行

通过 setTimeout 可以在指定时间后执行回调函数，适合简单的等待效果：

setTimeout(() => {
  console.log('延迟执行的操作');
}, 2000); // 2000毫秒后执行

使用 Promise 封装异步等待

结合 Promise 和 setTimeout 实现可链式调用的等待：

js实现等待效果

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

wait(3000).then(() => {
  console.log('3秒后执行');
});

使用 async/await 实现同步式写法

在异步函数中通过 await 实现更直观的等待：

async function delayedAction() {
  console.log('开始等待');
  await wait(2000); // 使用前例的wait函数
  console.log('等待结束');
}

加载动画配合等待效果

通过控制DOM元素显示/隐藏增强用户体验：

js实现等待效果

function showLoader() {
  document.getElementById('loader').style.display = 'block';
}

function hideLoader() {
  document.getElementById('loader').style.display = 'none';
}

async function fetchWithLoading() {
  showLoader();
  await wait(1500);
  // 模拟数据获取
  hideLoader();
}

使用 requestAnimationFrame 实现平滑动画

适合需要与屏幕刷新率同步的视觉等待效果：

function animateWait(duration) {
  const start = performance.now();

  function frame(time) {
    const elapsed = time - start;
    if (elapsed < duration) {
      requestAnimationFrame(frame);
    } else {
      console.log('动画等待结束');
    }
  }

  requestAnimationFrame(frame);
}

进度条模拟实现

通过定时更新进度状态模拟加载过程：

function simulateProgress(duration) {
  let progress = 0;
  const interval = 50;
  const steps = duration / interval;
  const increment = 100 / steps;

  const timer = setInterval(() => {
    progress += increment;
    console.log(`进度: ${Math.min(progress, 100)}%`);
    if (progress >= 100) clearInterval(timer);
  }, interval);
}