Переключить отображение делений на расстоянии 500 мс

Question

Что я хочу сделать:

Используя три div, занимающих одинаковые размеры, все display: none по умолчанию;

1. загрузить 2 изображения во второй div
2. показать первый div для 500 мс
3. показать второй div для 500 мс
4. , затем показать 3-й див.

Кажется достаточно простым?

Странная вещьв том, что примерно в 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);

Я также пытался установить непрозрачность = 1 или 0, ачем использование jquery show / hide, с тем же результатом.

Что действительно странно, так это то, что даже при возникновении этой проблемы время в 3 сообщениях console.log () по-прежнему составляет 500 мсек друг от друга! Так что, как будто javascript правильно его вызывает, но браузер просто не потрудилсяс перерисовкойЕще более странно, что это происходит как в Chrome, так и в Safari.

обновление

Я пытался установить stimuli_length на 1000 выше.С этим изменением иногда будет казаться, что он немного отстает от первого div и показывает второй div в течение меньшего промежутка времени, но, кажется, никогда не пропускает его полностью.500 мс - это строгое требование к дизайну.

Answer 1

Добавление $("#div2, #div3").hide(); после того, как вы показываете первый div, заставляет меня работать в этом jsfiddle .

Answer 2

Возможно, здесь что-то есть с динамическим добавлением ваших изображений.Даже если вы показываете div, если изображения не успели загрузить, оно будет выглядеть точно так же, как если бы оно никогда не показывалось.

Вы пытались изменить задержку примерно на 10 секунд, чтобыуверены (или почти), что изображения успели загрузить?

Answer 3

Почему бы вам не использовать

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

Это может решить вашу проблему, а также использовать обратный вызов один за другим, например

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