Форум

myocean · #1 (**permalink**) 06.08.2011, 22:46

Здравствуйте, казалось бы легкий вопрос, но...

Как правильно реализовать цикличность вызова функции, события и т.п
с помощью скажем setInterval, setTimeOut, everyTime (Jquery.timers.js) и т.д.?

Вроде все просто, пишем код, к примеру:

<script type="text/javascript">
function b_move(){
var visB = $(".b_sup:visible");
var nextB = visB.next();
$(".b_sup").fadeOut(1000); 
if(visB.length==0||nextB.length==0) 
$(".b_sup:first").delay(1000).fadeIn(500);
else nextB.delay(1000).fadeIn(500);      
}
$(document).everyTime(7500,'tmr_b',  b_move);
</script>

<span class="b_sup" ><img src="blalbalba" /></span>
<span class="b_sup" style="display:none"><img src="blalbalba" /></span>
<span class="b_sup" style="display:none"><img src="blalbalba" /></span>
<span class="b_sup" style="display:none"><img src="blalbalba" /></span>
<span class="b_sup" style="display:none"><img src="blalbalba" /></span>

Идея, поочередная смена картинок...
В IE, к примеру, все работает.... но откроем страницу в браузере Chrome,
и при условии ухода на некоторое время на другую вкладку и возвращению обратно, сможем видеть быструю смену картинок (как будто скрипт отрабатывает те итерации что мы пропустили за время нашего отсутствия) затем все возвращается на круги своя...

Aetae · #2 (**permalink**) 07.08.2011, 00:56

Тесты(запустите и погуляйте по вкладкам):

<html>
<body>
<script>
time=0;
(function check(){
   document.body.appendChild(document.createTextNode(-time+(time=new Date().getTime())+' | '));
setTimeout(check,200)
})()
</script>
</body>
</html>

<html>
<body>
<script>
time=0;
setInterval(function(){
   document.body.appendChild(document.createTextNode(-time+(time=new Date().getTime())+' | '));
},200)
</script>
</body>
</html>

myocean · #3 (**permalink**) 07.08.2011, 02:14

<html>
<body>
<script>
function b_move(){
var visB = $(".sup:visible");
var nextB = visB.next();
$(".sup:visible").fadeOut(1000); 
if(visB.length==0||nextB.length==0) 
$(".sup:first").delay(1000).fadeIn(500);
else nextB.delay(1000).fadeIn(500); 
setTimeout(b_move,5000);
}
b_move();
</script>

<div id="modul" style="height:100px;">
<span class="sup" style="display:none"> 1 </span>
<span class="sup" style="display:none"> 2 </span>
<span class="sup" style="display:none"> 3 </span>
<span class="sup" style="display:none"> 4 </span>
<span class="sup" > 5 </span>
<span class="sup" style="display:none"> 6 </span>
</div>

</body>
</html>

Спасибо за ответ!
Вот, по аналогии с вашим кодом (первый вариант)... глюки, к сожалению, в наличии...
Может дело в другом... таймер таймером, а вот fadeIn, fadeout отрабатываю неккоректно... за один цикл должны отработать один раз... а при уходе с вкладки и последующем возвращении отрабатываю по количеству пропущенных циклов ;(

myocean · #4 (**permalink**) 07.08.2011, 02:20

202 | 202 | 201 | 201 | 1001 | 1000 | 1000 | 841 | 201 | 202 | 201 | 202 | 201 | 202 | 201 | 202 | 201 | 201 | 201 | 201 | 201 | 202 | 201 | 201 | 202 | 295 | 213 | 201 | 1001 | 1000 | 1001 | 1001 | 200 | 201 | 201 | 201 | 201 | 202 | 201 | 201 | 202 | 201 | 202 | 201 | 201 | 202 | 201 | 201 | 1002 | 1001 | 1001 | 372 | 202 | 201 | 200 | 202 | 202 | 202 | 202 | 202 |

Кстати, что выдает Хром (выделено жирным) когда вкладка закрыта...

myocean · #5 (**permalink**) 09.08.2011, 12:12

devote · #6 (**permalink**) 09.08.2011, 12:20

юзай .animate() и все проблемы уйдут

myocean · #7 (**permalink**) 09.08.2011, 19:59

тогда появиться другая проблема...

$(".class").animate({blablabla},5000);

Как зациклить, при условии что количество объектов .class > 1?

myocean · #8 (**permalink**) 11.08.2011, 12:19

тема еще актуальна!

melky · #9 (**permalink**) 11.08.2011, 12:50

$(".class").each( function(index, el) { $(el).animate({blablabla} },5000);

Форум

Справочник

Discord чат

Курсы javascript