对函数调用进行排队

Question

在我的fiddle中，我有以下函数，称为trice（模拟用户连续快速启动三次）

https://jsfiddle.net/tvs1zdw9/1/

function test(){
  var r = $.Deferred();
  //simulate ajax call that loads data and takes 2 seconds
  setTimeout(function(){
    r.resolve();
    count++;
    $('#here>i').html(count);
  },2000);
  return r;
}

目标：无论用户按下按钮的速度有多快，我总是想等到功能完成，直到它再次运行。

我已经添加了一个延迟器（r），它用以下代码指示功能何时完成：

test().done(function(){
    console.log('done running function');
});

示例：

• 用户连续快速点击按钮3次
• 函数被调用三次（比它能完成的更快）
• 创建了一个"队列"
• 只要功能完成，"队列"中的下一个项目就会启动，而不是在此之前

我发现了jQuery队列功能，但它似乎只适用于链接到DOM中项目的函数。。。也许我没有完全理解。此处：https://api.jquery.com/queue/

有人能帮我建立一个队列，然后在每个功能完成后进行处理吗？

Answer 1

如果实现，代码可能非常简单，甚至很优雅

• 作为承诺链的队列
• 要作为函数排队的事物

首先，一个可重用的函数，它形成一个私有队列，并返回一个函数，通过该函数可以将项目添加到队列中。

function AsyncQueue(stopOnError) {
    var p = $.when(); // a resolved promise, which acts as the seed of a .then() chain (ie a "queue").
    return function(fn) {
        p = p
          .then(null, function() { if(!stopOnError) return $.when(); }) // prevent propagation of a previous error down the chain.
          .then(fn);
        return p;
    }
}

这样，队列（承诺链）将"自我管理"，因此对running和runQueue()的需求将消失。

现在你可以写：

function goodDelay() { // simulate a successful request
    return $.Deferred(function(dfrd){ setTimeout(dfrd.resolve, 1000); });
}
function badDelay() { // simulate a failed request
    return $.Deferred(function(dfrd){ setTimeout(dfrd.reject, 1000); });
}
var queue = AsyncQueue(false); // `queue` is a function with its own private .then chain.
queue(goodDelay).then(successHandler, errorHandler);
queue(badDelay).then(successHandler, errorHandler);
queue(goodDelay).then(successHandler, errorHandler);
function successHandler() {
    console.log('success:');
}
function errorHandler() {
    console.log('error:');
}

stopOnError的工作原理如下：

• false：内部错误处理程序确保队列始终沿着success路径前进，而不管之前的结果如何
• true：内部错误处理程序无效，队列采用其自然（jQuery）行为，将错误向下传播到链中。发生错误后，其他排队的函数将不会激发，尽管它们的外部errorHandler（如果存在）将激发，并且所有函数都将被告知相同的失败"原因"

演示stopOnError为false
DEMO带有stopOnError真实

Answer 2

解决方案：https://jsfiddle.net/jqqmrv4L/1/

我创建了一个可变队列

var queue = [];

当函数在完成之前被调用时，我将推送到队列。

  var count = 0;
  var running = false;
  var queue = [];
    var test = function(){
    var r = $.Deferred();
    if(!running){
      running = true;
      //simulate ajax call that loads data and takes 2 seconds
      setTimeout(function(){
        r.resolve();
        count++;
        $('#here>i').html(count);
        running = false;
      },2000);
    } else {
        console.log('called whilst running');
      queue.push('234');
    }
    return r;
    }

然后我有另一个函数来处理在初始函数完成后调用的队列，如下所示：

test().done(function(){
        console.log('done running function, checking queue');
      runqueue();
    });

这里是处理队列的最后一个"runqueue"函数：

function runqueue(){
         if(queue.length){
            console.log('queue has!', queue.length);
        //runqueue();
        test().done(function(){
            console.log('queue item completed');
          queue.splice(0,1); //delete this because it has ran
          //runqueue();
        });
      } else {
        console.log('queue done');
      }
  }