javascript - 事件监听器内部使用的异步函数是否受到事件本身的瓶颈？

Question

假设我有一个在每次输入后都会记录到控制台的函数。例如，其用法是将项目附加到列表中，然后设置一个计时器以将其删除。

const getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const button = document.querySelector('#click-me');

async function removeSomething(after) {
  setTimeout(() => {
    console.log('I fired after' + after.toString());
  }, after);
}

button.addEventListener('click', () => {
  removeSomething(getRandomInt(500, 2500));
});

<button id="click-me">Click me.</button>

当我声明一个函数async时，我假设它的范围超出了主事件的范围，并且能够在后面运行以允许其他事情运行，但问题是，如果该函数在一个事件监听器，假设我每秒单击该按钮 50 次，瓶颈是什么？无法处理 50 个点击事件或我的函数的 CPU？

我试图理解阻塞和非阻塞代码之间的交互。

Answer 1

When I declare a function async, I assume it scopes out of the main event and is able to run behind to allow other things to run

不!不存在所谓的“背景”。 JS 是单线程。使函数async在这里不是一个操作。它不会改变任何东西。

if that function is used within an event listener, assume I clicked that button 50 times a second, what would be the bottle-neck? The CPU that can't handle the 50 click events or my function?

嗯，您编写的所有代码都在您的 CPU 上运行？

I'm trying to understand the interaction between blocking & non-blocking code.

您编写的所有代码都在 JS 拥有的唯一线程上运行。因此，您编写的所有代码都会阻塞该线程。但是，如果您启动异步任务，引擎会将其(任务，而不是您的处理程序)卸载到您无法访问的另一个线程/硬件，因此附加回调或等待 promise 是非阻塞，当当前代码执行结束时，引擎可以执行其他代码，然后如果异步任务完成，它运行回调或继续异步函数 执行(它本身也是阻塞的)。

<小时/>

示例 1:来自计时器的回调:

  console.log(1);
  setTimeout(() => console.log(3), 1000);
  console.log(2);

 // Chain of actions:
 // Execution of the global scope:
 console.log(1);
 setTimeout(/*...*/, 1000); // Send timer task to some underlying mechanism, e.g. hardware timers
 console.log(2);
 // Execution of global scope ends

 // Engine goes on with other stuff

 // Timer finishes, callback gets called:
 (() => console.log(3))()
 // Callback ends

示例 2:WAITING获取调用:

  (async function task() {
     const req = await fetch("http://example.com");
     const result = await req.json();
  })();

  // Chain of actions:
 // Execution of the global scope
 (async function task() {
    /* halted here */ await fetch("http://example.com"); // Offloaded to some IO thread
    // Implicitly return promise
 })();
 // Execution of global scope ends

 // Engine goes on with other stuff

 // Response arrived from the server via some IO thread, execution continues:
    const req = /*the result*/
    /*halted*/ await req.json();
 // Execution ends

 // Engine goes on with other stuff

 // Response parsed, execution continues
 const result = /*the result*/
 return result; // Promise resolves
 // Execution ends

<小时/>

_{² 实际上不是，但它确实有一个“可观察到的同步执行模型”。 “JS 是单线程的”是其(过度)简化版本}