等待动画完成，然后返回 [英] Wait for animation to finish, then return

问题描述

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

因此，地图在被触发之前会被放大和放大，因此会被忽略。并且只有在第二次触发时才能正常工作。

  function doResize（）{
 if（$（＃ （），$ {$ b $（'＃map_div）。width（）> 600）{
 $（＃stores）。hide（0，function（）{
 $（＃map_div）。animate（{width：' （）; 
 google.maps.event.trigger（G_MAP，'resize'）; 
 $（＃stores）。fadeIn（1000）; 
}） ; 
}）; 
} 
} 
  

我不能将其余的代码放在回调函数中主要有两个原因，一个是它的一个大功能，它在两个地方使用。

请注意，当您第一次点击newyork时，它的偏移量不居中，然后点击不同的状态并点击纽约。 / p>

编辑：

因为我不能让动画同步并且做到：

  while（$（＃map_div）。width（）> 500）{
 $（＃map_div）。width（$（ #map_div）。width（） -  1）
} 
  

，我决定放弃动画。有时候迫使Jquery必须运行异步操作确实是一个垮台。特别是当javascript本身是单线程的时候，你会认为他们可以选择等待它完成。

解决方案

由于两个主要原因，我无法将其余代码放在回调中，其中一个是它的一个大功能，它在两个地方使用。

然而，这正是您必须做的所做的事 &mdash ;或者说，您不希望将代码移动到那里，只需从回调中添加对它的调用即可。你不能阻止等待动画完成的函数的返回，JavaScript中没有办法做到这一点。你可能尝试做的各种方式（忙等待等）都不起作用。不要紧，它只发生一次，你仍然需要使用回调。

I have a google maps app that will resize the map div if its too big, the problem I am having is that I am trying to use Jquerys animate and its returning the function before it's finished and I have to trigger to the google maps that it was resized.

Therefore the map is zoomed in and bounds set before its triggered, thus offseting it. and only correctly working when its triggered a second time.

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);
            });
        });
    }
}

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.

Notice how when you first click newyork its offset and not centered, then click a different state and click back on new york.

Edit:

Since I cannot make the animation synchronous and doing:

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

Is not smooth at all, I've decided to ditch the animation. Forcing Jquery to have to run asynchronous is really a downfall sometimes. Especially when javascript itself is single threaded, you'd think they would have options for waiting until its finished.

解决方案

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.

And yet, that's exactly what you must do — or rather, you don't want to move the code there, just add a call to it from the callback. You can't hold up the return of a function waiting for the animation to complete, there's just no way to do that in JavaScript. The various ways in which you might try to do that (busy-waiting, etc.) don't work. It doesn't matter that it only happens once, you still need to use a callback.

这篇关于等待动画完成，然后返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！