Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Виджеты стадного инстинкта (https://javascript.ru/forum/events/76245-vidzhety-stadnogo-instinkta.html)

noreset 17.12.2018 14:06

Виджеты стадного инстинкта
 
Добрый день. Я сделал блоки div содержания, типа "Ирина только что купила пылесос", "Федя купил самовар" и тд.

<div class="widget widget__bg">
	<div class="widget__img">
		<img src="/img/basket.svg" alt="">
	</div>
	<div class="widget__txt">
		<div><span class="widget__date">14.12.18</span> / <span class="widget__time">16:39</span></div>
		Дмитрий, г.Томск <br>
		Заказала 2 парника
	</div>
</div>


Мне нужно, чтобы эти divы появлялись в рандомный промежуток времени. Ну типа симулятор покупок.
Я вот сделал
$(function() {
    var p = $(".widget"),
        len = p.length,
        indx = 0;
        setInterval(function(){
        setTimeout(function(){
    ! function go() {
        p.eq(indx).fadeIn("slow", function() {
            $(this).delay(2000).fadeOut("slow", go)
        });
        indx = ++indx % len
    }()
},2000);
    },8000);
});


Но чет эффект не тот). И интервал постоянно один и тот же, и после одного прогона, потом начинаются тупники. Что не так?

Nexus 17.12.2018 14:10

Для чего у вас таймаут в интервале?
Зачем callback таймаута еще в функцию заворачивать?

noreset 17.12.2018 14:19

Спасибо за ответ. Да, действительно. Убрал лишнее
$(function() {
    var p = $(".widget"),
        len = p.length,
        indx = 0;
        setInterval(
    ! function go() {
        p.eq(indx).fadeIn("slow", function() {
            $(this).delay(2000).fadeOut("slow", go)
        });
        indx = ++indx % len
    }(),8000);
});

Все нормально работает, равномерно. Но как теперь сделать появление этого всего в разный промежуток времени? Ну типа первый появился б в 3 секунду, второй в 8, 3 в 1 и тд.?

Nexus 17.12.2018 14:22

Вы знаете, зачем у вас в коде восклицательный знак перед функцией go и круглые скобочки после нее?
Удалите их.

Интервал можно заменить на таймаут.

noreset 17.12.2018 14:24

Извиняюсь, но нет, я код с интернета нарыл. Ммм... А зачем, если не секрет?)

noreset 17.12.2018 14:26

Чтобы функция сама себя исполняла, как я понял

Nexus 17.12.2018 14:27

И знак вопрос, и скобочки сразу вызовут функцию, в итоге интервалу, как callback будет передан !undefined=true.
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};


$(function() {
    var p = $(".widget"),
        len = p.length,
        indx = 0;

    setTimeout(function go() {
        p.eq(indx).fadeIn("slow", function() {
            $(this).delay(2000).fadeOut("slow");
        });
        indx = ++indx % len

        setTimeout(go, getRandomInt(5, 10) * 1000);
    }, getRandomInt(5, 10) * 1000);
});

рони 17.12.2018 14:42

:write: setTimeout это лишнее

noreset 17.12.2018 14:44

Все отлично отрабатывает, только после нескольких прогонов вначале. Он начинает их быстро листать, а потом вроде хорошо, как надо и с разным промежутком. Что б это могло быть?

Nexus 17.12.2018 14:47

рони, без него функция отработает сразу после загрузки.


Часовой пояс GMT +3, время: 00:30.