jquery - 等待动画完成，然后返回

Question

我有一个谷歌地图应用程序，如果它太大，它会调整 map div的大小，我遇到的问题是我正在尝试使用Jquerys animate，它在完成之前返回该函数，我必须触发谷歌地图已调整大小。

因此， map 会在触发之前放大并设置边界，从而对其进行偏移。并且只有在第二次触发时才能正确工作。

function doResize() {
    if ($("#map_div").width() > 600) {
        $("#stores").hide(0, function(){
            $("#map_div").animate({width: '500px'}, function(){
                google.maps.event.trigger(G_MAP, 'resize');
                $("#stores").fadeIn(1000);
            });
        });
    }
}

我无法将其余代码放入回调中，主要有两个原因，一是它是一个大函数并且在两个地方使用。而且宽度只有一次超过600。

请注意，当您第一次单击“纽约”时，其偏移量且未居中，然后单击不同的州并返回“纽约”。

编辑:

因为我无法使动画同步并执行:

while($("#map_div").width() > 500) {
    $("#map_div").width($("#map_div").width() - 1)
}

一点也不流畅，我决定放弃动画。强制 Jquery 必须异步运行有时确实是一种失败。特别是当 javascript 本身是单线程时，您可能会认为它们可以选择等待它完成。

Answer 1

I cannot put the rest of the code in the callback for two main reasons, one is that its a big function and its used in two places. Also the width is only over 600 once.

然而，这正是您必须做的 - 或者更确切地说，您不想移动那里的代码，只需从回调中添加对它的调用。您无法阻止函数返回等待动画完成，JavaScript 中无法做到这一点。您可能尝试执行此操作的各种方法(忙等待等)都不起作用。即使只发生一次也没关系，你仍然需要使用回调。