简单jquery延迟队列

Question

我有一个同步的方法foo(param)。

我希望可以在没有执行实际foo()调用的情况下调用foo(param)，直到稍后发生特定事件为止。

它看起来是一个很好的推迟/承诺的候选人，但我肯定做错了什么，因为超时没有任何影响。

日志方法应该返回承诺吗？

​

var log = function(message) {
    $('#log').append('<p>' + message + '</p>');
};

$(function() {
 
    var q = new $.Deferred();
    
    q.then(log("1"));
    q.then(log("2"));
    q.then(log("3"));
    q.then(log("4"));
    q.then(log("5"));
    q.then(log("6"));
    q.then(log("7"));
    
    setTimeout(function(){
        q.resolve();
    }, 10000);
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

​

Answer 1

是的，你说q.then(log("..."))的行应该是q.then(function() { log("...") })。

您的log函数很好，但是您当前的代码工作方式是，您已经在调用它并将其返回值传递给then函数。这就是为什么您需要创建一个新的函数，延迟稍后将在其解析时调用该函数。

Answer 2

当您执行q.then(log("1"));时，它试图将"log("1")“的函数值传递给当时的函数。这是评估函数的原因，这就是为什么您在控制台中看到它们，而不是您想要的。

像这样包装它们，应该可以解决您的问题：

q.then(function() {
    log("1")
});

Answer 3

确切地说，你应该写什么完全取决于什么是什么意思“直到一个特定的事件以后”。

可以用两种方式来解释。

用户事件：用户事件(在浏览器中)类似于“单击”或“鼠标切换”。它的发生并不取决于javascript/jQuery中的任何内容，而且可能永远不会发生。但是，通过附加事件处理程序，可以确保如果/当事件发生时，将采取预定的操作过程。

将按以下方式确定日志顺序：

$(selector).on('eventType', function() {
    log("1");
    log("2");
    log("3");
    log("4");
    log("5");
    log("6");
    log("7");
});

异步响应：异步响应是异步进程完成时发生的事件。它的发生取决于(a)启动的过程和(b)最终的完成。同样，完成可能永远不会发生，但比使用用户事件更有保障。一个写得很好的aync过程应该保证完成(成功或失败)。

将按以下方式确定日志顺序：

asyncProcess().then(function() {
    log("1");
    log("2");
    log("3");
    log("4");
    log("5");
    log("6");
    log("7");
});

如您所见，在这两种情况下，log()语句都是直接的顺序代码行。

在这两种情况下，都没有必要建立承诺链，因为log()本身是同步的。但是，如果您想探索Deferreds/允诺的性质，那么异步版本可以编写如下：

asyncProcess()
    .then(log.bind(null, "1"))
    .then(log.bind(null, "2"))
    .then(log.bind(null, "3"))
    .then(log.bind(null, "4"))
    .then(log.bind(null, "5"))
    .then(log.bind(null, "6"))
    .then(log.bind(null, "7"));

// Note that .then() takes functions as arguments so `.bind(...)` is necessary to establish functions with bound-in arguments, without actually executing `log("1"); log("2"); log("3");` etc at the time the .then() chain is established.

只要asyncProcess()返回承诺：

• 已经解决了
• 会在将来的某个时候得到解决，

.then()链中指定的函数将执行，日志中将显示1,2,3,4,5,6,7。

在其最简单的形式中，asyncProcess可能如下所示：

function asyncProcess() {
    return $.when(); //return a resolved promise
}

演示

为了更具冒险精神，并赋予承诺链某种目的，您可以探索它传递数据的能力。

首先，调整asyncProcess()以返回已解析的承诺，并将一个数字作为参数传递给函数：

function asyncProcess(n) {
    return $.when(n);//return a promise resolved with the valie 1
}

然后，调整log()以接受一个数字n，记录它，并返回n+1

function log(n) {
    $('#log').append('<p>' + n + '</p>');
    return n + 1;
}

并将承诺链调整如下：

asyncProcess(1)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log);

在这里，对.bind()的需求消失了，因为使用原始log时没有任何绑定参数。log的每个调用中的参数由上一次调用的返回值提供。

演示