以 500 毫秒间隔切换 div 的显示

Question

我想做什么：

使用三个占据相同维度的div，默认都是display: none；

1. 将 2 张图片加载到第二个 div 中
2. 显示第一个 div 500 毫秒
3. 显示第二个 div 500ms
4. 然后显示第三格。

看起来很简单？

奇怪的是，在 15% 的时间里，它似乎在第一个 div 上等待并显示更长时间，然后第二个 div 永远不会被看到，似乎直接进入第三个 div。

html:

<div id="div1">...</div>
<div id="div2"><div id="img1"></div><div id="img2"></div></div>
<div id="div3">...</div>

尝试 #1：

var focus_length = 500;
var stimuli_length = 500;

// dummy values
var newimg1 = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png';
var newimg2 = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png';


console.log("step 1");
$("#div1").show();
$("#img1, #img2").empty();
$("#img1").append($(document.createElement('img')).attr('src', newimg1));
$("#img2").append($(document.createElement('img')).attr('src', newimg2));

window.setTimeout(
    function () {
        console.log("step 2");
        $('#div1').hide();
        $('#div2').show();
    }, focus_length);

window.setTimeout(function () {
    console.log("step 3");
    $('#div2').hide();
    $('#div3').show();
}, focus_length + stimuli_length);

第二种变体（相同的明显行为）：

console.log("step 1");
$("#div1").show();
$("#img1, #img2").empty();
$("#img1").append($(document.createElement('img')).attr('src', newimg1));
$("#img2").append($(document.createElement('img')).attr('src', newimg2));

window.setTimeout(
    function () {
        console.log("step 2");
        $('#div1').hide();
        $('#div2').show();

        window.setTimeout(function () {
            console.log("step 3");
            $('#div2').hide();
            $('#div3').show();
        }, stimuli_length);
    }, focus_length);

我也尝试设置 opacity=1 或 0 而不是使用 jquery show/hide，结果相同。

真正奇怪的是，即使遇到这个问题 3 个 console.log() 消息的时间间隔仍然是 500 毫秒！ 所以就像 javascript 正确调用它但浏览器只是不必费心实际显示重绘。更奇怪的是，Chrome 和 Safari 都会发生这种情况。

更新

我尝试将stimuli_length 设置为 1000 以上。有了这个更改，它有时会在第一个 div 上出现一点延迟，并在更短的时间内显示第二个 div，但似乎不会完全跳过它。然而，500ms 是一个严格的设计要求。

Answer 1

在显示第一个 div 后添加 $("#div2, #div3").hide(); 使其在 jsfiddle 中对我有用。

Answer 2

也许这里有一些与您的图像动态附加有关的东西。即使您显示 div，如果图像没有时间加载，它看起来就像从未显示过一样。

您是否尝试过将延迟更改为大约 10 秒以确保（或几乎）图像有时间加载？

Answer 3

你为什么不使用

('#div1').show(timeinmiliseconds);

它可以解决你的问题，也可以一个接一个地使用回调 喜欢

('#div1').show(timeinmiliseconds,('#div2').show(timeinmiliseconds, ('#div3').show(timeinmiliseconds);););