8

我有一个变量can_run，它可以是 1 或 0，然后我有一个函数队列，它应该在变量从 切换0到时立即运行1（但一次只有 1 个这样的函数）。

现在，我所做的是

var can_run=1;
function wait_until_can_run(callback) {
    if (can_run==1) {
        callback();
    } else {
        window.setTimeout(function(){wait_until_can_run(callback)},100);
    }
}

//...somewhere else...

wait_until_can_run( function(){
   can_run=0;
   //start running something
});

//..somewhere else, as a reaction to the task finishing..
can_run=1;

它有效，但是，连续运行大约 100 次超时并没有让我觉得非常有效。信号量之类的东西在这里会很方便；但总的来说，JavaScript 中并不真正需要信号量。

那么，在这里使用什么？

编辑：我写过“函数队列”，但正如这里所见，我并不关心顺序。

4

3 回答 3

30

这是一个不错的 Queue 类，您可以在不使用超时的情况下使用：

var Queue = (function () {

    Queue.prototype.autorun = true;
    Queue.prototype.running = false;
    Queue.prototype.queue = [];

    function Queue(autorun) {
        if (typeof autorun !== "undefined") {
            this.autorun = autorun;
        }
        this.queue = []; //initialize the queue
    };

    Queue.prototype.add = function (callback) {
        var _this = this;
        //add callback to the queue
        this.queue.push(function () {
            var finished = callback();
            if (typeof finished === "undefined" || finished) {
                //  if callback returns `false`, then you have to 
                //  call `next` somewhere in the callback
                _this.dequeue();
            }
        });

        if (this.autorun && !this.running) {
            // if nothing is running, then start the engines!
            this.dequeue();
        }

        return this; // for chaining fun!
    };

    Queue.prototype.dequeue = function () {
        this.running = false;
        //get the first element off the queue
        var shift = this.queue.shift();
        if (shift) {
            this.running = true;
            shift();
        }
        return shift;
    };

    Queue.prototype.next = Queue.prototype.dequeue;

    return Queue;

})();

它可以像这样使用：

// passing false into the constructor makes it so 
// the queue does not start till we tell it to
var q = new Queue(false).add(function () {
    //start running something
}).add(function () {
    //start running something 2
}).add(function () {
    //start running something 3
});

setTimeout(function () {
    // start the queue
    q.next();
}, 2000);

小提琴演示：http: //jsfiddle.net/maniator/dUVGX/

更新为使用 es6 和新的 es6 Promises：

class Queue {  
  constructor(autorun = true, queue = []) {
    this.running = false;
    this.autorun = autorun;
    this.queue = queue;
  }

  add(cb) {
    this.queue.push((value) => {
        const finished = new Promise((resolve, reject) => {
        const callbackResponse = cb(value);

        if (callbackResponse !== false) {
            resolve(callbackResponse);
        } else {
            reject(callbackResponse);
        }
      });

      finished.then(this.dequeue.bind(this), (() => {}));
    });

    if (this.autorun && !this.running) {
        this.dequeue();
    }

    return this;
  }

  dequeue(value) {
    this.running = this.queue.shift();

    if (this.running) {
        this.running(value);
    }

    return this.running;
  }

  get next() {
    return this.dequeue;
  }
}

它可以以相同的方式使用：

const q = new Queue(false).add(() => {
    console.log('this is a test');

    return {'banana': 42};
}).add((obj) => {
    console.log('test 2', obj);

    return obj.banana;
}).add((number) => {
    console.log('THIS IS A NUMBER', number)
});

// start the sequence
setTimeout(() => q.next(), 2000);

虽然这次如果传递的值是一个承诺等或一个值，它会自动传递给下一个函数。

小提琴：http: //jsfiddle.net/maniator/toefqpsc/

于 2013-07-08T14:17:18.317 回答
7

我不确定在普通 JS 中执行此操作的最佳方法，但许多库都有延迟实现，这对于这个用例非常有用。

使用 jQuery：

var dfd = $.Deferred();
var callback = function() { 
    // do stuff
};
dfd.done(callback);  // when the deferred is resolved, invoke the callback, you can chain many callbacks here if needed
dfd.resolve(); // this will invoke your callback when you're ready

编辑 这些库支持的延迟的好处之一是它们通常与 Ajax 事件兼容，进而与其他延迟对象兼容，因此您可以创建复杂的链、在 Ajax 完成时触发事件或在多个条件后触发“完成”回调被满足。这当然是更高级的功能，但放在你的后兜里也不错。

于 2013-07-08T14:18:09.813 回答
2

除了此处的其他有用答案之外，如果您不需要这些解决方案提供的附加功能，那么 异步信号量很容易实现。

不过，与此处介绍的其他选项相比，它是一个较低级别的概念，因此您可能会发现这些选项更方便满足您的需求。尽管如此，我认为异步信号量还是值得了解的，即使您在实践中使用更高级别的抽象。

它看起来像这样：

var sem = function(f){
    var busy = 0;
    return function(amount){
        busy += amount;
        if(busy === 0){
            f();
        }
    };
};

你像这样调用它：

var busy = sem(run_me_asap);

busy是一个维护它正在等待的异步操作的内部计数器的函数。当该内部计数器达到零时，它会触发 run_me_asap您提供的功能。

您可以在运行异步操作之前增加内部计数器busy(1)，然后异步操作负责在busy(-1)完成后减少计数器。这就是我们可以避免需要计时器的方法。（如果您愿意，您可以编写sem它返回一个带有inc和 dec方法的对象，就像在 Wikipedia 文章中一样；这就是我的做法。）

这就是创建异步信号量所需要做的一切。

这是它的一个使用示例。您可以 run_me_asap按如下方式定义函数。

var funcs = [func1, func2, func3 /*, ...*/];
var run_me_asap = function(){
    funcs.forEach(function(func){
        func();
    });
});

funcs可能是您想在问题中运行的函数列表。（也许这不是您想要的，但请参阅下面的“NB”。）

然后在其他地方：

var wait_until_ive_finished = function(){
    busy(1);
    do_something_asynchronously_then_run_callback(function(){
        /* ... */
        busy(-1);
    });
    busy(1);
    do_something_else_asynchronously(function(){
        /* ... */
        busy(-1);
    });
};

当两个异步操作都完成时，busy的计数器将被设置为零，run_me_asap并将被调用。

注意您如何使用异步信号量取决于您的代码架构和您自己的要求；我列出的可能不是你想要的。我只是想向您展示它们是如何工作的；剩下的就看你了！

而且，有一点建议：如果您要使用异步信号量，那么我建议您将它们的创建和对busy更高级别抽象的调用隐藏起来，这样您就不会在应用程序代码中乱扔低级细节。

于 2013-07-08T16:09:25.777 回答