Замедлите мой javascript! Как разрешить моему коду ждать завершения перехода перед выполнением?

Странный вопрос, я думаю, но у меня есть этот фрагмент кода на моей странице...

$(".map-overlay-left").click(function () {  
    $("#map-holder").hide('slow');                                  
    var gmarkers = [];
    var side_bar_html = "";

    var map = new GMap2(document.getElementById('map-holder'));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var Africa = new GLatLng(-2.767478,23.730469);
    map.setCenter(Africa, 4);   

    $.get("http://xx.xxx.xxxx.xxx/xml-feed-google-maps",{},function(xml) {
        $('marker',xml).each(function(i) {
            html = $(this).text();
            lat = $(this).attr("lat");
            lng = $(this).attr("lng");
            label = $(this).attr("label");
            var point = new GLatLng(lat,lng);
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
        });
    });

    $("#map-holder").show('slow');
});

Это работает фантастически и делает то, что я хочу, функционально, но не с точки зрения пользовательского интерфейса. Сначала нужно сделать приятный переход, чтобы скрыть div «держатель карты», отобразить карту Google внутри него, а затем сделать хороший переход обратно к размеру. Переход — это отображение/скрытие JQuery по умолчанию.

Теперь проблема, которую я, кажется, получаю, заключается в том, что карта Google отображается, пока этот $("#map-holder").hide('slow'); все еще работает, и вы видите проблески карты, прежде чем она скроется, а затем снова откроется, что как бы бросает вызов всему эффекту.

Таким образом, кто-нибудь знает, как я могу замедлить код, чтобы дождаться завершения функции скрытия, прежде чем делать все остальное? (в идеале я не хочу использовать что-то жестко запрограммированное, например setTimeout).

Заранее спасибо!

Шади

ОБНОВЛЕНИЕ 1

Я вызываю функцию скрытия, но это очень странно влияет на GMap. В Chrome/FF/Safari он отображает только небольшой сегмент в углу карты, когда он появляется. а в ИЕ вообще скидывается и центрируется в другом месте. GMap, похоже, не любит отображаться в скрытом div.

Вы можете увидеть это здесь http://afid.staging.dante-studios.com/ это на передней панели (просто нажмите кнопку воспроизведения в Азии или Африке, чтобы увидеть странный эффект).

Любые идеи о том, как решить эту проблему?

ОБНОВЛЕНИЕ 2. Попытка исправить проблему неправильного отображения карты Google в скрытом div следующим образом:

$(".map-overlay-left").click(function () {  
    $("#map-holder").hide('slow', function(){                                   
        var gmarkers = [];
        var side_bar_html = "";

        var map = new GMap2(document.getElementById('map-holder'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var Africa = new GLatLng(-2.767478,23.730469);
        map.setCenter(Africa, 4);   

        $.get("http://afid.staging.dante-studios.com/xml-feed-google-maps",{},function(xml) {
            $('marker',xml).each(function(i) {
                html = $(this).text();
                lat = $(this).attr("lat");
                lng = $(this).attr("lng");
                label = $(this).attr("label");
                var point = new GLatLng(lat,lng);
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
            });
        });

    });
    $("#map-holder").show('slow');
    map.checkResize();
    map.setCenter(Africa, 4);   
});

Но увы не повезло с методом map.checkResize();. Есть идеи?


google-maps javascript jquery optimization transitions
person Shadi Almosri    schedule 14.12.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Используйте обратный вызов для .hide, чтобы выполнить свою работу после завершения анимации:

$("#map-holder").hide('slow', function() {
  var gmarkers = [];
  var side_bar_html = "";      

  // ...

  $("#map-holder").show('slow');
})
person Roatin Marth    schedule 14.12.2009
comment
Я обновил вопрос о проблеме, созданной исправлением обратного вызова... есть идеи? :) - person Shadi Almosri; 15.12.2009
comment
shadi: попробуйте переместить var map = new GMap2(document.getElementById('map-holder')) непосредственно перед вызовом hide(). Что это делает? - person Roatin Marth; 15.12.2009
comment
@Roatin: Отлично, он исправил это, я думаю, что в Gmap понял контейнер, прежде чем он пошел пуф! - Спасибо за вашу помощь. - person Shadi Almosri; 15.12.2009

arrow_upward
1
arrow_downward

вам нужно добавить функцию обратного вызова к функции скрытия, которая будет выполняться, когда она будет скрыта:

$(".map-overlay-left").click(function () {      
    $("#map-holder").hide('slow', function(){                                                                  
        var gmarkers = [];
        var side_bar_html = "";

        var map = new GMap2(document.getElementById('map-holder'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var Africa = new GLatLng(-2.767478,23.730469);
        map.setCenter(Africa, 4);       

        $.get("http://afid.staging.dante-studios.com/xml-feed-google-maps",{},function(xml) {
            $('marker',xml).each(function(i) {
                html = $(this).text();
                lat = $(this).attr("lat");
                lng = $(this).attr("lng");
                label = $(this).attr("label");
                var point = new GLatLng(lat,lng);
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
                //alert(lat + " " + lng + " " + label);
            });
        });

        $("#map-holder").show('slow');
    });
});
person Marius    schedule 14.12.2009

arrow_upward
0
arrow_downward

Попробуйте этот ответ SO, если вы ищете vanilla JS.

События списка перехода различаются в каждом браузере, поэтому приведенная ниже функция найдет, какой слушатель использовать, и вернет правильный.

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

var transitionEnd = whichTransitionEvent();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

function theFunctionToInvoke(){
// set margin of div here
}
person serebit    schedule 09.06.2016