Виджеты стадного инстинкта
Добрый день. Я сделал блоки 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);
});
Но чет эффект не тот). И интервал постоянно один и тот же, и после одного прогона, потом начинаются тупники. Что не так? |
Для чего у вас таймаут в интервале?
Зачем callback таймаута еще в функцию заворачивать? |
Спасибо за ответ. Да, действительно. Убрал лишнее
$(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 и тд.? |
Вы знаете, зачем у вас в коде восклицательный знак перед функцией go и круглые скобочки после нее?
Удалите их. Интервал можно заменить на таймаут. |
Извиняюсь, но нет, я код с интернета нарыл. Ммм... А зачем, если не секрет?)
|
Чтобы функция сама себя исполняла, как я понял
|
И знак вопрос, и скобочки сразу вызовут функцию, в итоге интервалу, как 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);
});
|
:write: setTimeout это лишнее
|
Все отлично отрабатывает, только после нескольких прогонов вначале. Он начинает их быстро листать, а потом вроде хорошо, как надо и с разным промежутком. Что б это могло быть?
|
рони, без него функция отработает сразу после загрузки.
|
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> .widget{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var p = $(".widget"), len = p.length, indx = 0;
void function go() {
var tm = (Math.random() * 5 + 5) * 1000|0;
p.eq(indx).delay(tm).fadeIn("slow", function() {
indx = ++indx % len;
$(this).delay(2000).fadeOut("slow", go);
});
}();
});
</script>
</head>
<body>
<div class="widget">01</div>
<div class="widget">02</div>
<div class="widget">03</div>
<div class="widget">04</div>
<div class="widget">05</div>
<div class="widget">06</div>
<div class="widget">07</div>
<div class="widget">08</div>
<div class="widget">09</div>
<div class="widget">10</div>
<div class="widget">11</div>
<div class="widget">12</div>
</body>
</html>
|
Убрал лишний вызов "go" после того, как элемент будет скрыт.
|
рони, ну да, можно и так.
|
А, не, все норм. Это я там чет накосячил, вставил не правильно. Все хорошо работает. Nexus, спасибо)
|
| Часовой пояс GMT +3, время: 10:59. |