在javascript中执行函数队列 [英] Execute function queue in javascript

问题描述

我正在尝试创建一个包含多个函数的函数队列。
创建之后，我想在其中执行每个函数。
但是这些函数在它们内部有延迟指令，所以我想等待每个函数在继续之前完成它的执行。

I'm trying to create a function queue with several functions in it. After the creation i want to execute each function in it's turn. But these function have delayed instructions inside of them, so i want to wait for each of the functions to complete its execution before the continuing.

我的尝试：

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

但这不起作用。
我该怎么做？

But this does not work. How should i do it?

推荐答案

尝试使用 .queue（）， .promise（）;另请参见更改jQuery队列中动画的缓动函数

Try utilizing .queue() , .promise() ; see also Change easing functions on animations in jQuery queue

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 + "<br>")
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

或者，使用 $。when（）

function executeFunctionQueue(funqueue) {
  return $.when(!!funqueue[funqueue.length - 1] 
                ? funqueue.pop().call().then(function() {
                  return executeFunctionQueue(funqueue)}) 
                : "complete")
}

executeFunctionQueue(funqueue)
.then(function(complete) { 
  console.log(complete) 
});

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 + "<br>")
}

function executeFunctionQueue(funqueue) {
  return $.when(!!funqueue[funqueue.length - 1] 
                ? funqueue.pop().call().then(function() {
                  return executeFunctionQueue(funqueue)}) 
                : "complete")
}

executeFunctionQueue(funqueue)
.then(msg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

这篇关于在javascript中执行函数队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！