等到具有动画的函数完成，直到运行另一个函数

本文介绍了等到具有动画的函数完成，直到运行另一个函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我在正常（非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 / etcFunctionOne();// What I -was- doing to wait till running the next function filled// with animations, etcsetTimeout(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 SOLUTIONjQuery 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 etcfunctionWithAnimations();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 $.Deferredvar 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 neededvar FunctionTwo = function () { console.log('FunctionTwo');};// call FunctionOne and use the `done` method// with `FunctionTwo` as it's parameterFunctionOne().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/ 这篇关于等到具有动画的函数完成，直到运行另一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！