当前位置：首页 > JavaScript

js实现依次显示

2026-03-16 06:11:05JavaScript

使用 setTimeout 实现依次显示

通过递归调用 setTimeout 实现元素逐个显示的效果。这种方法适合需要控制每个元素显示间隔的场景。

function showElementsSequentially(elements, delay) {
  let index = 0;
  function showNext() {
    if (index < elements.length) {
      elements[index].style.display = 'block';
      index++;
      setTimeout(showNext, delay);
    }
  }
  showNext();
}

// 使用示例
const items = document.querySelectorAll('.item');
showElementsSequentially(items, 500);

使用 async/await 实现顺序显示

结合 async/await 和 Promise 可以创建更易读的顺序执行代码。这种方法适合现代前端开发。

js实现依次显示

async function displayInOrder(elements, delay) {
  for (const element of elements) {
    await new Promise(resolve => {
      setTimeout(() => {
        element.style.display = 'block';
        resolve();
      }, delay);
    });
  }
}

// 使用示例
const boxes = document.querySelectorAll('.box');
displayInOrder(boxes, 300);

使用 CSS 动画实现序列显示

通过动态添加 CSS 类来实现顺序显示效果。这种方法性能较好，适合大量元素的情况。

js实现依次显示

function animateElementsSequence(selector, interval) {
  const elements = document.querySelectorAll(selector);
  elements.forEach((el, i) => {
    setTimeout(() => {
      el.classList.add('visible');
    }, i * interval);
  });
}

/* CSS 部分需要定义：
.visible {
  opacity: 1;
  transform: translateY(0);
}
*/

// 使用示例
animateElementsSequence('.card', 200);

使用 Intersection Observer 实现懒加载式顺序显示

当页面滚动时，元素进入视口后依次显示。这种方法适合长页面内容展示。

function lazyLoadSequence(selector, rootMargin = '0px') {
  const elements = document.querySelectorAll(selector);
  let currentIndex = 0;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && entry.target === elements[currentIndex]) {
        entry.target.style.opacity = 1;
        currentIndex++;
      }
    });
  }, { rootMargin });

  elements.forEach(el => {
    el.style.opacity = 0;
    el.style.transition = 'opacity 0.5s ease';
    observer.observe(el);
  });
}

// 使用示例
lazyLoadSequence('.section');

使用 CSS transition-delay 实现批量顺序显示

通过 JavaScript 动态设置 CSS transition-delay 属性，让浏览器处理动画时序。

function staggeredAppear(containerSelector, stagger = 0.1) {
  const container = document.querySelector(containerSelector);
  const children = container.children;

  Array.from(children).forEach((child, i) => {
    child.style.transition = `all 0.5s ease ${i * stagger}s`;
    child.style.opacity = 1;
  });
}

/* CSS 初始状态需要定义：
.container > * {
  opacity: 0;
}
*/

// 使用示例
staggeredAppear('.gallery', 0.2);

标签: js