在javascript中执行函数队列
我正在尝试创建一个包含多个函数的函数队列。 在创建之后，我想在其中执行每个function。 但是这些函数在它们内部延迟了指令，所以我想等待每个函数在继续之前完成它的执行。
我的尝试：
var funqueue = []; funqueue.push( function() {fun1() }); funqueue.push( function() {fun2() }); funqueue.push( function() {fun3() }); executeFunctionQueue(funqueue); 执行函数是：
function executeFunctionQueue(funqueue){ var fun1=funqueue.pop; $.when(fun1()).then(executeFunctionQueue(funqueue)); }
但这不起作用。 我该怎么办？
尝试使用.queue() .promise() ; 另请参阅更改jQuery队列中动画的缓动函数
function fun1() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(1) }, 1500) }).promise().then(msg) } function fun2() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(2) }, 1500) }).promise().then(msg) } function fun3() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(3) }, 1500) }).promise().then(msg) } var funqueue = []; funqueue.push(function() { return fun1() }); funqueue.push(function() { return fun2() }); funqueue.push(function() { return fun3() }); function msg(data) { if (data === "complete") console.log(data) else $("body").append(data + "
") } function executeFunctionQueue(funqueue) { var deferred = funqueue.pop(); return deferred().then(function() { // set `this` within `$.queue()` , `.then()` to empty object `{}`, // or other object return $({}).queue("fun", $.map(funqueue, function(fn) { return function(next) { // return `next` function in `"fun"` queue return fn().then(next) } })).dequeue("fun").promise("fun") .then(function() { // return "complete" string when `fun` queue empty return "complete" }) }); } executeFunctionQueue(funqueue) .then(msg);
如果你有返回Promise的函数，可以使用像sequence这样的函数非常简单地完成：
// sequence :: [(undefined -> Promise)] -> Promise function sequence(fns) { var fn = fns.shift(); return fn ? fn().then(sequence.bind(null, fns)) : Promise.resolve(undefined); }
sequence假定您的异步/ Promise -returning函数不接受任何输入并且不产生任何输出（它们仅被称为副作用。）
sequence函数的示例用法是：
sequence([f1, f2, f3]); function f1() { return new Promise(function (res) { setTimeout(function () { console.log('f1'); res(); }, 100); }); } function f2() { return new Promise(function (res) { setTimeout(function () { console.log('f2'); res(); }, 1100); }); } function f3() { return new Promise(function (res) { setTimeout(function () { console.log('f3'); res(); }, 10); }); }
这将按顺序注销’f1’，’f2’和’f3’，其间有不同的指定时间延迟。
用这个
function executeFunctionQueue(funqueue){ if(!funqueue.length){ return } var fun1=funqueue.pop(); $.when(fun1()).then(function(){ executeFunctionQueue(funqueue) }); }
或者如果排队的函数不是异步的话。
function executeFunctionQueue(funqueue){ var fun=funqueue.pop(); fun() if(!funqueue.length){ return } executeFunctionQueue(funqueue); }
- 首先创建一个给定的函数数组：
var array_of_functions = [function1, function2, function3, function4];
使用延迟/保证模式执行其他function完成的function。
var createQueue = function () { var d = $.Deferred(), p = d.promise(), triggerQueue = function () { d.resolve(); }; return { addToQueue: p.then, triggerQueue: triggerQueue } }; var cq = createQueue(); cq.addToQueue(function () { console.log("hi"); }).then(function () { console.log("hello"); }); cq.triggerQueue();
为了建立一个干净的队列，你的异步函数需要以某种方式表示它们何时完成，否则下一个函数将不知道何时开始。 这意味着你不能传入任何旧函数; 他们需要遵循一些格式。 我建议将done回调作为函数调用中的第一个参数。 这样，您可以同时支持同步和异步function。
var processQueue = function nextStep(queue) { var next = queue.shift(); next && next(function() { nextStep(queue); }); } function fun1(done) { setTimeout(function() { console.info('1'); done(); }, 1000); } function fun2(done) { console.info('2'); done(); } processQueue([fun1, fun2]); // >> 1 second wait // >> 1 // >> 2