Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скрипт работает по разному с alert() и без него (https://javascript.ru/forum/jquery/25068-skript-rabotaet-po-raznomu-s-alert-i-bez-nego.html)

d_r_v 24.01.2012 13:35

Скрипт работает по разному с alert() и без него
 
Добрый день! Есть две функции:

function travel(step){
					var i=0;
					while (i < step) {
						travel1 = Number($.cookie("travel1"));
						travel1++;
						$.cookie("travel1", travel1);

						action();
						i++;
						alert();
					}
				};


и

function action(){
					$.post("travel.php", {travel: travel1, top_test: "1"}, function(data){
						if (Number(data) != $.cookie("p1PositionT1")){
							$.cookie("p1PositionT1", Number(data));
							$(".play1").animate({
								top: $.cookie("p1PositionT1")
							}, 1000 );					
						}
					});

					$.post("travel.php", {travel: travel1, left_test: "1"}, function(data){
						if (Number(data) != $.cookie("p1PositionL1")){
							$.cookie("p1PositionL1", Number(data));
							$(".play1").animate({
								left: $.cookie("p1PositionL1")
							}, 1000 );
						}
					});
				};


Результат работы можно посмотреть здесь: http://download-true.ru/test/ . Все работает так как мне надо. Действие происходит по нажатию карточек 3-5.

Но когда я убираю из функции travel() строку

alert();


То все начинает работать не верно (можно посмотреть здесь: http://download-true.ru/test2/). Подскажите, пожалуйста, почему так происходит?

Если вопрос нубский сразу извиняюсь, ява скрипт начал изучать букваль вчера. Заранее спасибо.

d_r_v 25.01.2012 05:33

Уважаемые гуру, неужели, никто не знает, как решить данную проблему?

Хотя возможно, я не совсем ясно сформулировал вопрос или не четко выразил свою мысль?

melky 25.01.2012 12:53

что начинает работать "неверно" ?

Gvozd 25.01.2012 13:36

d_r_v,
вам необходимо разобратся с понятием асинхронности.
в вашем примере в функции action() вы посылаете асинхронно два запроса, и в теле обработчика ответа выполняете код анимации.
Это означает, что анимации будут выполнены не последовательно, и даже не обязательно паралельно.
Если ответ на второй запрос придется сразу, а на первый - через 3 секунды, то сперва выполнится вторая анимация, а затем первая.

Еще раз другими словами:
$.post в вашем коде вызываются последовательно друг за другом.
А вот соответствующие им function(data) юудут выполнены тогда, когда придет результат с сервера, а не сразу. Это и есть асинхронность.
Более того, между вторым $.post и первым выполнившимся function(data) может пройти достаточно времени, и в это время может выоплнится еще что-нибудь(если есть чему)

Более того, если в функцию travel передать аргумент более 1, то по-факту, вы посылаете сразу 4 и более запросов.
И ответы могут прийти в ином порядке, чем вы послали запросы. А значит и анимации будут выполнены в ином от задуманного порядке. Возможно даже по нескольку паралельно

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

В общем, вам надо переписать логику своего приложения на асинхронную, а именно запускать анимацию, только после прихода обоих результатов, и только после анимации, запускать следующий travel

Также вы можете избавится от асинхронности в $.post (см документацию), но учтите, что пока он выполняется в таком режиме, никакой другой код выполнятся не будет, и браузер "повиснет" на время запроса, что не очнеь красиво


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