等到具有动画的函数完成，直到运行另一个函数 [英] Wait till a Function with animations is finished until running another Function

问题描述

我在正常（非ajax ）函数中遇到问题，其中每个函数涉及大量动画。目前我只是在函数之间有一个 setTimeout ，但这不是完美的，因为没有浏览器/电脑是一样的。

附加注意：它们都有单独的动画/等冲突。

我不能简单地把一个放在另一个回调函数中

  //多个dom动画/ etc 
 FunctionOne 
 
 //我做什么等待直到运行下一个函数填充
 //与动画等
 
 setTimeout（function（）{
 FunctionTwo（）; //其他dom动画（一些触发上一个动画）
}，1000）; 
  

在js / jQuery中还有：

  //伪代码
 -do FunctionOne（）
 -when finished :: run  - > FunctionTwo（）
  

我知道 $。when（）& $。done（），但这些是用于AJAX ...

---

• 我的更新解决方案

jQuery有一个因为某些原因没有列在jQuery文档中的任何地方）$ .timers，它保存当前正在进行的动画数组。

  function animationsTest（callback）{
 //测试任何/所有页面动画当前是否活动
 
 var testAnimationInterval = setInterval（function（）{
 if（！ timers.length）{//任何页面动画完成
 clearInterval（testAnimationInterval）; 
 callback（）; 
} 
}，25）; 
}; 
  

基本用法：

  //用动画等运行一些函数
 functionWithAnimations（）; 
 
 animationsTest（function（）{// < - 这将在所有上述动画完成后运行
 
 //您的回调（所有动画后的事情done）
 runNextAnimations（）; 
 
}）; 
  

解决方案

您可以使用jQuery的 $。延迟

  var FunctionOne = function（）{
 //创建一个延迟对象
 var r = $ .Deferred（）; 
 
 //做任何你想要的（例如ajax / animations其他asyc任务）
 
 setTimeout（function（）{
 // and call'resolve` on deferred对象，一旦你完成
 r.resolve（）; 
}，2500）; 
 
 //返回延迟对象
 return r; 
}; 
 
 //根据需要定义FunctionTwo 
 var FunctionTwo = function（）{
 console.log（'FunctionTwo'）; 
}; 
 
 //调用FunctionOne并使用`done`方法
 //使用FunctionTwo作为参数
 FunctionOne（）。done（FunctionTwo）; 
  

您还可以一起包含多个延迟：

  var FunctionOne = function（）{
 var 
a = $ .Deferred（），
b = $ .Deferred（）; 
 
 //一些假的asyc任务
 setTimeout（function（）{
 console.log（'a done'）; 
 a.resolve（）; 
}，Math.random（）* 4000）; 
 
 //一些其他假的asyc任务
 setTimeout（function（）{
 console.log（'b done'）; 
 b.resolve（）; 
}，Math.random（）* 4000）; 
 
 return $ .Deferred（function（def）{
 $ .when（a，b）.done（function（）{
 def.resolve（）; 
}）; 
}）; 
}; 
  

http：// jsfiddle.net/p22dK/

I'm having an issue with normal (non-ajax) functions that involve lots of animations within each of them. Currently I simply have a setTimeout between functions, but this isn't perfect since no browsers / computers are the same.

Additional Note: They both have separate animations/etc that collide.

I can't simply put one in the callback function of another

// multiple dom animations / etc
FunctionOne();

// What I -was- doing to wait till running the next function filled
// with animations, etc

setTimeout(function () { 
    FunctionTwo(); // other dom animations (some triggering on previous ones)
}, 1000); 

Is there anyway in js/jQuery to have:

// Pseudo-code
-do FunctionOne()
-when finished :: run -> FunctionTwo()

I know about $.when() & $.done(), but those are for AJAX...

---

• MY UPDATED SOLUTION

jQuery has an exposed variable (that for some reason isn't listed anywhere in the jQuery docs) called $.timers, which holds the array of animations currently taking place.

function animationsTest (callback) {
    // Test if ANY/ALL page animations are currently active

    var testAnimationInterval = setInterval(function () {
        if (! $.timers.length) { // any page animations finished
            clearInterval(testAnimationInterval);
            callback();
        }
    }, 25);
};

Basic useage:

// run some function with animations etc    
functionWithAnimations();

animationsTest(function () { // <-- this will run once all the above animations are finished

    // your callback (things to do after all animations are done)
    runNextAnimations();

});

解决方案

You can use jQuery's $.Deferred

var FunctionOne = function () {
  // create a deferred object
  var r = $.Deferred();

  // do whatever you want (e.g. ajax/animations other asyc tasks)

  setTimeout(function () {
    // and call `resolve` on the deferred object, once you're done
    r.resolve();
  }, 2500);

  // return the deferred object
  return r;
};

// define FunctionTwo as needed
var FunctionTwo = function () {
  console.log('FunctionTwo');
};

// call FunctionOne and use the `done` method
// with `FunctionTwo` as it's parameter
FunctionOne().done(FunctionTwo);

you could also pack multiple deferreds together:

var FunctionOne = function () {
  var
    a = $.Deferred(),
    b = $.Deferred();

  // some fake asyc task
  setTimeout(function () {
    console.log('a done');
    a.resolve();
  }, Math.random() * 4000);

  // some other fake asyc task
  setTimeout(function () {
    console.log('b done');
    b.resolve();
  }, Math.random() * 4000);

  return $.Deferred(function (def) {
    $.when(a, b).done(function () {
      def.resolve();
    });
  });
};

http://jsfiddle.net/p22dK/

这篇关于等到具有动画的函数完成，直到运行另一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！