0

让我们看看我的问题！我有一个带有 2 个 DIV 的 HTML 页面。这两个都链接到点击事件触发的 jQuery 函数。所以我们有 div1 和 div2。这里我们有一些代码：

<div id="div1"></div>
<div id="div2"></div>
....
<script>
   $('#div1').click(function(){
       $('#div1').animate({some animations...},1000);
   });
   $('#div2').click(function(){
       $('#div2').animate({something else...},1000);
   });
</script>

好的，我的问题是，如果用户尝试单击 div1，则 div1 必须做动画，这需要一些时间......但是如果在此动画期间用户尝试单击 div2，则不必触发此单击直到 div1 动画完成。我发布的脚本只是我的一个非常短的版本，我无法修改这些函数的结构。我尝试使用绑定/取消绑定，但我不能让 divX 等到其他动画停止，因为绑定函数会自动触发我附加到元素的事件。你能帮助我吗？

编辑：为了确保每个人都能理解，假设在我的示例中我们有 5 个 div，每个 div 都有在点击事件时触发的不同功能。如果我单击 div1，则必须在执行由 div1 触发的动画期间禁用所有其他 div，动画完成后可以再次在单击事件上启用它们....为了确保，如果我单击div1，然后直到动画完成，我可以单击所有其他 div，但必须触发任何事件。

4

3 回答 3

0

您可以使用延迟对象使一个动画等待另一个动画完成：

$('#div2').click(function() {
    $('#div1').promise().done(function() {
        $('#div2').animate(...);
    });
});

仅当任何现有动画完成.promise().done(...)时才会启动内部回调。#div1如果没有，它将立即进行。

见http://jsfiddle.net/alnitak/NjCf4/

或者，您可以使用.queue：

$('#div1').queue(function(next) {
    $('#div2').animate(...);
    next();
});

后面的代码会将 的动画排#div2在当前队列的末尾#div1。但是，如果后续的附加动画排队，#div1它们仍然会在以后发生。

deferred 方法可能更好，因为 1) 它允许您等待任意一组元素，以及 2) 它专门等待直到所有动画完成，而不是将新动作放入队列中。

于 2012-10-03T12:59:19.847 回答
0

这里的问题是您正在触发需要一段时间的函数（动画在执行时可能需要一秒钟或更长时间），并且在执行此过程时进程被阻止。

Nicholas C. Zakas 在他的“高性能 Javascript”一书中建议将长时间的处理操作封装在一小段时间内，以避免这些操作阻塞其余的执行。

主要思想是使用定时器来划分每个耗时超过 50ms 的操作。我会看看我是否可以稍后在这里发布一个示例。

于 2012-10-03T13:00:06.497 回答
0

通过一个标志，您可以发现动画是否正在运行。

flag = false;
$("#div1").click(function() {
  flag = true;
  $( "#anim1" ).animate({
    opacity: 0.25}, 1000, function() {
    flag = false;
  });
});
于 2018-02-21T21:32:49.993 回答