使用 Javascript 延迟最简单的 HTML 页面

Question

我正在托管这个超级简单的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或手机上进行测试时，当我触摸选项卡时，它会立即检测到活动/悬停/焦点状态，但随后有半秒钟的延迟，然后选项卡改变颜色，内容开始过渡。

我本以为这么简单的页面会快如闪电！ 我尝试在我的设备上浏览亚马逊，它们的按钮反应比我的标签更快。所以我假设这不仅仅是由于设备的运行方式。 此外，我尝试将我的页面限制为 2 个选项卡而不是 8 个选项卡，但它并没有更快。 此外，我尝试在 2 台不同的服务器上托管我的页面，这也无济于事。 我错过了什么？

感谢您的帮助！

Answer 1

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

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

其他解决方案可以在这里找到： 消除移动 Safari 中点击事件的 300 毫秒延迟