javascript - 使用 Javascript 在最简单的 HTML 页面上延迟

Question

我正在托管这个 super 简单的 HTML 页面，它基本上是一个屏幕，一次显示 8 个选项卡之一。基本上如下，但有 8 个选项卡而不是我在这里显示的 2 个选项卡:

<div id="global">
  <nav>
    <a href="#" id="nav1" class="navBtn" onclick="switchSlide(event, 1);">Slide 1</a>
    <a href="#" id="nav2" class="navBtn" onclick="switchSlide(event, 2);">Slide 2</a>
  </nav>
  <div id="content">
    <section id="slide1">
      <img src="./ss01.jpg" />
    </section>
    <section id="slide2">
      <img src="./ss02.jpg" />
    </section>
  </div>
</div>

当您单击一个选项卡时，这里是执行转换的函数:

function switchSlide(e, slideNum) {
  e.preventDefault();
  for (x=0; x<document.getElementsByTagName("section").length; x++) {
    document.getElementsByTagName("section")[x].className = "";
    document.getElementsByClassName("navBtn")[x].className = "navBtn";
  }
  document.getElementById("slide"+slideNum).className = "active";
  document.getElementById("nav"+slideNum).className = "navBtn active";
}

交叉淡入淡出过渡由 CSS 处理，过渡有持续时间但没有延迟。

section {
  opacity:0;
  transition:opacity 0.6s;
}

section.active {
  opacity:1;
}

当我在我的计算机上测试该页面时，在单击选项卡后立即开始转换。但是当我在我的 iPad 或手机上测试时，当我触摸选项卡时，它会立即检测到事件/悬停/焦点状态，但随后会有半秒的延迟，然后选项卡会改变颜色和内容开始转换。

我原以为这么简单的页面会快如闪电! 我试过在我的设备上浏览亚马逊，他们的按钮 react 比我的标签更快。所以我假设这不仅仅是因为设备的运行方式。 我还尝试将我的页面限制为 2 个选项卡而不是 8 个，但速度并没有加快。 我也试过在 2 台不同的服务器上托管我的页面，但这也没有帮助。 我错过了什么？

感谢您的帮助!

Answer 1

移动浏览器在点击后有 300 毫秒的延迟。有一些解决方法，但对我有用的是在头部包含视口(viewport):

<meta name="viewport" content="width=device-width, user-scalable=no">

其他解决方案可以在这里找到: Eliminate 300ms delay on click events in mobile Safari