javascript - 间隔 500 毫秒切换 div 的显示

Question

我想做的事情:

使用三个占据相同尺寸的div，默认全部display: none；

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

看起来很简单？

奇怪的是，大约有 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，但似乎从未完全跳过它。然而，500 毫秒是一个严格的设计要求。

Answer 1

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

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