Пауза при изпълнение на израз в цикъл.

[HanKrum]

Имам следния код:

Код: Javascript

1. $(function(){
2.     $('#zakovan_list').hover(function(){
3.         $id = $(this).attr('id');
4.         for ($b=1;$b<=4;$b++) {
5.             $('#zakovan_list').attr('src', 'V/pic/zakovan_list'+$b+'.png');
6.             //Тук искам някаква пауза
7.         }
8.     }, function(){
9.         for ($b=3;$b>=0;$b--) {
10.             $('#zakovan_list').attr('src', 'V/pic/zakovan_list'+$b+'.png');
11.             //Тук искам някаква пауза
12.         }
13.     });
14. });

... с него като попадне курсора върху елемента img с id="zakovan_list", на негово място зареждам поредица от изображения за да симулирам анимация при разгъване на свитък, но изображенията се зареждат твърде бързо и ефекта от анимацията е нулев.
Има ли възможност в JS да се направи пауза там където съм отбелязал в кода.

п.п. Ползвам jQuery.

ето временен линк до това: http://178.16.134.231/hankrum.info/syveti.php

[yani21]

За съжаление в js няма sleep като в php(поне доколкото знам и каза чичо гугъл). Така в цикъл не ми идва идея как спреш кода, но мога да ти предложа нещо друго:

Код: [Маркирай кода]

var times = 4;

function a()
{
if(times == 0)
{
return false;
} else {
alert('w');
setTimeout('a()', 1000);
}

times--;
}

a();В случая функцията ти изпълнява ролята на цикъл дано ти е от полза.

[HanKrum]

Направих го така:

Код: Javascript

1. $(function(){
2.     $('#zakovan_list').hover(function(){
3.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list1.png')}, 0);
4.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list2.png')}, 100);
5.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list3.png')}, 200);
6.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list4.png')}, 300);
7.     }, function(){
8.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list3.png')}, 0);
9.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list2.png')}, 100);
10.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list1.png')}, 200);
11.         setTimeout(function(){$('#zakovan_list').attr('src', 'V/pic/zakovan_list0.png')}, 300);
12.     });
13. });

[yani21]

Може да го направиш малко по-практично:

Код: [Маркирай кода]

    $(function(){
        $('#zakovan_list').hover(function(){
            setTimeout(zakovanList(1), 0);
            setTimeout(zakovanList(2), 100);
            setTimeout(zakovanList(3), 200);
            setTimeout(zakovanList(4), 300);
        }, function(){
            setTimeout(zakovanList(3), 0);
            setTimeout(zakovanList(2), 100);
            setTimeout(zakovanList(1), 200);
            setTimeout(zakovanList(0), 300);
        });
    });
function zakovanList(number)
{
$('#zakovan_list').attr('src', 'V/pic/zakovan_list'+number+'.png');
}
При който и да било език когато имаш едно и също действие повече от един път е най-добре да го изнесеш в отделна функция и да я викаш. В случая няма голям смисъл от това поради това, че използваш само една фунция от jquery, но пък кода става по-лесен за четене.