JavaScript中如何等待函数执行？实现点击D延迟1秒执行、点击A需等待延迟函数完成的方案

嘿，我懂你的需求啦——就是要让D键触发的延迟任务跑完之后，再执行A键的逻辑，不能让A直接插队对吧？你现在的代码里setTimeout是异步的，所以按A的时候会直接输出，根本不会等D的延迟结束。咱们用Promise队列就能完美解决这个问题！

核心思路就是维护一个任务队列，所有按键触发的逻辑都按顺序排进队列里，只有前一个任务彻底完成，下一个任务才会启动。这样不管你按D之后多久按A，A的逻辑都会乖乖等D的延迟任务执行完再跑。

完整实现代码 #

// 初始化一个已完成的Promise，作为队列的起始点
let taskQueue = Promise.resolve();

$(document).keydown(function (e) {
    // 统一转小写，不用分开判断大小写
    const key = e.key.toLowerCase();

    if (key === 'd') {
        // 把延迟任务追加到队列尾部
        taskQueue = taskQueue.then(() => {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log('d clicked');
                    // 任务完成后标记resolve，让队列继续执行下一个任务
                    resolve();
                }, 1000);
            });
        });
    } else if (key === 'a') {
        // 把A键的逻辑追加到队列尾部，自动等待前面的任务完成
        taskQueue = taskQueue.then(() => {
            console.log('a clicked');
            return Promise.resolve();
        });
    }
});

工作原理说明 #

• taskQueue变量始终保存着队列的最后一个Promise，每次新任务都通过.then()追加到队列末尾，形成链式调用。
• 按D键时，我们创建了一个带1秒延迟的Promise，只有当这个Promise执行完成（也就是延迟结束、console.log('d clicked')跑完），队列才会推进到下一个任务。
• 如果在D的延迟期间按A键，A的任务会自动排在D任务的后面，等D的任务彻底结束后再执行。

测试场景验证 #

1. 快速按D→按A：控制台会先等1秒输出d clicked，紧接着输出a clicked。
2. 单独按A：立刻输出a clicked。
3. 按D→等1秒后按A：先输出d clicked，再立刻输出a clicked。

这个方案不仅满足你的需求，还很好扩展——之后要是想加其他按键的有序任务，直接照着这个模式往队列里加就行！

内容的提问来源于stack exchange，提问作者Ghayas Ud Din