Вход

Просмотр полной версии : Скрипт работает по разному с alert() и без него


d_r_v
24.01.2012, 13:35
Добрый день! Есть две функции:

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 (см документацию), но учтите, что пока он выполняется в таком режиме, никакой другой код выполнятся не будет, и браузер "повиснет" на время запроса, что не очнеь красиво