JavaScript 中的点击事件排队

Question

每当单击一定数量的不同按钮之一时，我正在使用 addEventListener 执行一些不同的代码。

我想控制何时执行此代码。更具体地说，我希望将所有这些按钮的点击事件排队，以便在代码中的任何时候我都可以获取尚未获取的最旧事件，将其从队列中删除并执行相应的代码。

例如，在 Rust 中，我通过使用 crossterm crate 事件模块中的 poll() 和 read() 函数来做到这一点（

https://docs.rs/crossterm/latest/crossterm/event/index.html ）。 poll() 函数告诉我队列中是否有事件，read() 函数给我最旧的事件并将其从队列中删除。

在 JavaScript 中有一个简单的方法吗？

谢谢！

Answer 1

你可以只拥有一个

workQueue = []

，将函数推送到它上面，然后每当你想运行“下一个作业”时，调用 

workQueue.shift()()

。例如。如果你只想每秒运行一项工作，你可以这样做：

const workQueue = [];

let i = 0;

document.querySelector('#add').addEventListener('click', () => {
    const job = () => {
        console.log(i++);
    };
    workQueue.push(job);
});

document.querySelector('#run').addEventListener('click', () => {
   runNextJob()
});

const runNextJob = () => workQueue.length && workQueue.shift()()
setInterval(() => {
    runNextJob()
}, 1000);

<button id="add">Add Event</button>

<button id="run">Run Now</button>

话虽这么说，您也可以在单击时立即运行该作业，您会获得相同的效果，而且速度更快。但这确实带来了能够“排队”工作的好处，然后无论何时你都可以告诉它做下一个单元。