Javascript 简单jquery延迟队列

我有一个同步的方法foo（param）

我希望可以自由调用foo（param），而无需执行实际的foo（）调用，直到稍后发生特定事件

它看起来是延迟/承诺的一个很好的候选者，但我一定是做错了什么，因为超时没有任何效果

log方法应该返回承诺吗

var log=函数（消息）{
$（'#log'）。追加（''+message+'
'）；
};
$（函数（）{
var q=新的美元递延（）；
q、 然后（log（“1”））；
q、 然后（log（“2”））；
q、 然后（log（“3”））；
q、 然后（日志（“4”）；
q、 然后（日志（“5”）；
q、 然后（log（“6”））；
q、 然后（日志（“7”）；
setTimeout（函数（）{
q、 解决（）；
}, 10000);
});
是的，说
q.then（log（“…”）
的行应该说
q.then（function（）{log（“…”）}）

您的
log
函数很好，但是您的代码当前的工作方式是您已经在调用它并将其返回值传递给
然后
函数。这就是为什么您需要创建一个新函数，延迟函数在解析后将调用它。
当您执行
q时（log（“1”）它试图获取要传递给then函数的“
log（“1”）
”函数值。这是在评估函数，这就是为什么您在控制台中看到它们而不是您想要的

这样包装它们可以解决您的问题：

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

确切地说，你应该写什么完全取决于“直到某个特定事件发生”

这个问题可以用两种方式来解释

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

日志序列的建立如下所示：

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

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

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(1)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log);

异步响应：异步响应是异步进程完成时发生的事件。其发生取决于（a）正在启动的aync过程和（b）其最终完成。同样，完成可能永远不会发生，但比用户事件更有保证。编写良好的aync流程应保证完成（成功或失败）

日志序列的建立如下所示：

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

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

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(1)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log);

如您所见，在这两种情况下，log（）语句都是直接的连续代码行

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

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

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

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(1)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log)
    .then(log);

只要
asyncProcess（）
返回以下承诺：


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

将执行
.then（）
链中指定的函数，并在日志中显示1,2,3,4,5,6,7

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

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


为了让promise chain更具冒险精神，并赋予它某种用途，您可以探索它传递数据的能力

首先，调整
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;
}

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

我尝试了这种方法，但对于图像加载，这种逻辑似乎是错误的，有一种方法可以在队列中加载图像（按特定顺序），并且在总加载时间内加载完成/失败方法吗？我看到了这段代码：它实现了队列，但本例中的问题是，使用了“setTimeout”，并且不可能为结束队列添加done/fail。