放慢我的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');
});

这非常有效,并且可以实现我所需要的功能,而不是UI明智的选择.它的意思是首先进行一个很好的过渡,以隐藏div的“ map-holder”,在其中渲染google map,然后再进行过渡到大小的过渡.过渡是默认的JQuery显示/隐藏.

现在,我似乎遇到的问题是,在此$(“#map-holder”).hide(‘slow’);时正在渲染Google Map.仍在运行,您会在隐藏之前看到地图的一瞥,然后再次打开,这有点不利于整体效果.

因此,有人知道我如何放慢代码的速度,以等待hide函数完成之后再进行其余操作？ (理想情况下,我不想使用诸如setTimeout这样的硬编码的东西).

提前致谢！

沙迪

更新1

我已经对hide函数进行了回调,但是它对GMap产生了非常奇怪的影响.在Chrome / FF / Safari中,当地图显示时,它只会在地图的一角呈现一小段.而在IE中,它完全被抛弃并集中在其他位置. GMap似乎不喜欢在隐藏的div中渲染.

您可以在此处看到它在前面的http://afid.staging.dante-studios.com/(只需按亚洲或非洲的播放按钮即可看到怪异的效果).

有关如何解决此问题的任何想法？

更新2
尝试通过以下方法解决Google Map无法在隐藏的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();方法.有任何想法吗？

解决方法:

动画完成后,请使用callback to .hide来执行工作：

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

  // ...

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

标签：optimization,google-maps,transitions,javascript,jquery
来源： https://codeday.me/bug/20191024/1919515.html