VPF::Странный порядок выполнения JS

just_sage

Дата 14.8.2009, 19:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 23.8.2007

Репутация: нет
Всего: нет

Всем доброго времени суток.

Повстречался с проблемой, на которую не хватает знаний, чтобы решить. В принципе, ситуация простая, а результат - не очень простой.

Суть: в функции-обработчике событий, инструкции выполняются не по порядку (или что-то в этом роде).

Столкнулся с этим делом, при работе с ThickBox-ом. Нужно сначала показать модальное окошко с затемнением всей остальной области экрана. Потом, по клику, сначала убрать затемнение(ф-ия tb_remove()), а затем выполнить некотрые действия. В результате получается так, что затемение исчезает только после отработки всей функции-обработчика, т.е. в сааааааамом конце, даже если tb_remove() стоит первой линией в обработчике. В tb_remove() вроде ничего такого долгоиграющего нет.

Наваял тестовую страничку, чтобы было еще понятнее: http://web-panda.ru/tb_test/

JS-код тестовой странички:

Код


function close1() {
    tb_remove();
    return false;
}

function close2() {    
    tb_remove();
    $(this).hide();
    alert('По сути дела функция tb_remove() на текущий момент уже отработала. Затемнение должно исчезнуть, но оно не исчезает. Начинается цикл вычислений для задержки.');
    for(qq = 0; qq < 10000000; qq++) {
        if (qq % 5000001 == 0 && qq != 0)
            alert('Половина вычислений сделана. Затемнение все еще тут. И почему пока идет цикл, tb_remove() нифига не делает ? При этом $(this).hide(); на второй линии уже отработала.');
        dd = 9.77777777777 + 777777777.9999999999;
    }
    alert('Вычисления окончены. Почему-то затеменение убирается, только сейчас');
    return false;
}

$(document).ready(function() {
        $('#close1').click(close1);
        $('#close2').click(close2);
});

Код функции tb_remove():

Код


function tb_remove() {    
   $("#TB_imageOff").unbind("click");
  $("#TB_closeWindowButton").unbind("click");
  $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
  $("#TB_load").remove();
  if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
    $("body","html").css({height: "auto", width: "auto"});
    $("html").css("overflow","");
  }
  document.onkeydown = "";
  document.onkeyup = "";
  
  return false;
}

Может это уже вполне известное поведение. Что-то не могу ничего поиском найти.

Спасибо за внимание. Подскажите пожалуйста кто что может

youri

Дата 14.8.2009, 21:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16

потому что эффекты (в частности fadeOut) основаны на setTimeout, поэтому для них callback задается. Может и можно их без него запустить, но вряд ли это нужно. А в javascript в пределах фрейма функции параллельно не выполняются. И получается, что как только начинаются вычисления, они не дают продолжаться fadeOut. А что за вычисления, кстати?

p.s. Очерёдность событий и синхронизация в JavaScript - хорошая статья, в общем-то связанная с темой

--------------------

С кем разговаривает Microsoft

just_sage

Дата 17.8.2009, 10:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 23.8.2007

Репутация: нет
Всего: нет

youri, спасибо за посыл в верном направлении smile

Жаль что сам пока не смог додуматься. И за ссылку тоже спасибо, дельная статься. smile

В качестве решения немного подправил код thickbox.js:

Код


$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});

заменил на

Код


$("#TB_window").hide();
$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();

Теперь все работает как надо. Может кому пригодится.

Цитата(youri @ 14.8.2009, 21:07

)

А что за вычисления, кстати?

Да так, там через ajax запрос к БД.

Это сообщение отредактировал(а) just_sage - 17.8.2009, 10:38

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »