有人可以解释JS事件循环吗?

发布于 2025-02-04 03:30:28 字数 524 浏览 3 评论 0原文

因此,我有点了解JS事件循环,但仍然有一些问题。这是我的场景和一些问题。

假设我具有以下功能:

  1. 函数1-读取一个绝对的巨大文件。
  2. function2 -console.log(“ hey”);
  3. function3 -console.log(“怎么了”);

我理解这一点的方式,如果我错了,会纠正我,将会发生的是function1,function2和function3将添加到队列中。然后,函数1将添加到呼叫堆栈中,然后将接下来的两个函数添加。

现在,我感到困惑的部分是因为第一个功能将花费很长时间会发生什么?是否将其推到其他地方,以便执行接下来的两个功能?我认为答案是,唯一可以继续运行的方法是使其成为异步功能。而您使其成为异步函数的方式是使用回调函数或承诺。如果是这种情况,它怎么知道这是一个异步函数?并且将其推到哪里,以便可以执行其他两个功能,因为它们相对简单?

我想我自己回答了这个问题,但我一直在让自己感到困惑,所以如果有人可以用非常简单的术语来解释,那将为一个极其愚蠢的问题而感到遗憾。

So I kind of understand the JS event loop, but still have a few questions. Here is my scenario and a few questions.

So let's say I have these functions:

  1. function1 - reads an absolute huge file.
  2. function2 - console.log("Hey");
  3. function3 - console.log("What's up");

The way I am understanding this, and correct me if I'm wrong, what would happen is that the function1, function2, and function3, would be added to the queue. Then function1 would be added to the call stack followed by the next two functions.

Now the part where I'm confused is because the first function is going to take an extremely long time what happens to it? Does it get pushed somewhere else so that the next two functions are executed? I think the answer to this is that the only way it gets pushed somewhere else so that you can continue running is to make it an asynchronous function. And the way you make it a asynchronous function is either by using a callback function or promises. If this is the case how does it know that this is a asynchronous function? And where does it get pushed to so that the other two functions can be executed since they are relatively simple?

I think I answered the question myself but I keep confusing myself so if somebody could explain in extremely simple terms that would be great and sorry for the extremely stupid question.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

再见回来 2025-02-11 03:30:28

事件队列中未推动普通功能调用,它们只是同步执行。

某些内置功能启动异步操作。例如,settimeout()创建一个计时器,该计时器将在将来的时间异步执行函数。 fetch()启动AJAX请求,并返回在收到响应时可以解决的承诺。 addeventListener()创建一个侦听器,该侦听器将在指定事件发生在元素上时调用该函数。

在所有这些情况下,有效发生的是在达到相应条件时将回调函数添加到事件队列中。

当调用其中一个功能时,它将运行到完成。当功能返回时,事件循环将下一个项目从事件队列中拉出并运行其回调,依此类推。

如果事件队列为空,则事件循环只是闲置,直到添加东西为止。因此,当您刚刚从一个简单的网页开始时,直到单击具有事件侦听器的内容,它的侦听器函数将运行。

在诸如网页之类的交互式应用程序中,我们尝试避免编写需要很长时间才能完成的功能,因为它阻止了用户界面(其他异步操作不会中断它)。因此,如果您要读取一个大文件,则使用逐渐读取它的API,调用每个块的事件侦听器。这将允许其他功能在每个块的处理之间运行。

没有什么可以识别异步功能的具体特定的,它只是每个函数定义的一部分。您不能说任何具有回调参数的函数都是异步的,因为诸如array.foreach()之类的函数是同步的。而且承诺不会使某些事情变得不同步 - 您可以创建一个同步解决的诺言,尽管通常没有意义(但是当呼叫者期望在一般情况下有希望时,您可以将其作为存根做到这一点)。关键字async在函数定义之前将其返回值包裹在承诺中,实际上并没有使其异步运行。

Ordinary function calls are not pushed on the event queue, they're just executed synchronously.

Certain built-in functions initiate asynchronous operations. For instance, setTimeout() creates a timer that will execute the function asynchronously at a future time. fetch() starts an AJAX request, and returns a promise that will resolve when the response is received. addEventListener() creates a listener that will call the function when the specified event occurs on an element.

In all these cases, what effectively happens is that the callback function is added to the event queue when the corresponding condition is reached.

When one of these functions is called, it runs to completion. When the function returns, the event loop pulls the next item off the event queue and runs its callback, and so on.

If the event queue is empty, the event loop just idles until something is added. So when you're just starting at a simple web page, nothing may happen until you click on something that has an event listener, then its listener function will run.

In interactive applications like web pages, we try to avoid writing functions that take a long time to run to completion, because it blocks the user interface (other asynchronous actions can't interrupt it). So if you're going to read a large file, you use an API that reads it incrementally, calling an event listener for each block. That will allow other functions to run between processing of each block.

There's nothing specific that identifies asynchronous functions, it's just part of the definition of each function. You can't say that any function that has a callback argument is asynchronous, because functions like Array.forEach() are synchronous. And promises don't make something asychronous -- you can create a promise that resolves synchronously, although there's not usually a point to it (but you might do this as a stub when the caller expects a promise in the general case). The keyword async before a function definition just wraps its return value in a promise, it doesn't actually make it run asynchronously.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文