Javascript 切换间隔500ms的div的显示

我想做的是：

使用占据相同维度的三个div，所有

显示：默认情况下为none

将2个图像加载到第二个div中

显示500毫秒的第一个div

显示500毫秒的第二个div

然后显示第三分区

看起来很简单

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

html:

第二种变体（相同的表面行为）：

我还尝试将不透明度设置为1或0，而不是使用jquery show/hide，结果相同

真正奇怪的是，即使遇到这个问题，3 console.log（）消息上的计时仍然相隔500毫秒！这就像javascript正确地调用了它，但浏览器却懒得实际显示重画。更奇怪的是，这种情况在Chrome和Safari上都会发生

更新

---

我试着将

刺激长度设置为1000以上。通过此更改，它有时会在第一个div上出现一点延迟，并在较短的时间内显示第二个div，但不会完全跳过它。不过，500ms是一个严格的设计要求。
也许这里有一些动态附加图像的功能。即使显示div，如果图像没有时间加载，它看起来也会完全一样，就像从未显示一样

您是否尝试过将延迟时间更改为10秒，以确保（或几乎）图像有时间加载？
添加
$（“#div2，#div3”）.hide（）在您显示第一个div之后，我可以在这里使用它。
为什么不使用

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

它可以解决您的问题，还可以一个接一个地使用回调
像

我已经预装了所有的图片，所以这不应该是一个问题。我还尝试了更复杂的方法，创建了一个Image（）对象，并在其加载事件上放置了一个处理程序，该处理程序只会触发工作流的下一部分；在这种情况下，第二个div有时会显示为like div2和div3，它们在任何代码执行之前就已经被隐藏了。您指的是
显示：无display:none。但我希望你能找到一个适合你需要的解决方案！div的css看起来怎么样？我用了你的css并删除了我的行。仍然有效。我不知道是否可以是特定于浏览器的？
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);

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

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