Question

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

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

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

我已经添加了一个deferrer（r），它指示函数何时完成以下代码：

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

示例：

用户快速连续点击按钮3次
调用函数三次（比完成时更快）
有一个＆＃34;队列＆＃34;创建
＆＃34;队列中的下一项＆＃34;在功能完成时而不是在

我发现了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 ：内部错误处理程序确保队列始终沿着成功路径向下移动，无论之前的结果如何。
true ：内部错误处理程序呈现无效，队列采用其自然（jQuery）行为将错误传播到链中。发生错误后，进一步排队的函数将不会触发，但是它们的外部错误处理程序（如果存在）将会触发，并且将被告知失败的相同“原因”。

DEMO ，stopOnError为假 {strong> 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();
    });

这里是最终的＆＃34; runqueue＆＃34;处理队列的函数：

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

队列函数调用

2 个答案: