javascript - 异步方法中的阻塞回调会导致 UI 拖拽吗？

Question

我刚刚读了一篇关于异步编程和事件循环的文章。在阅读过程中，他描述了如果我调用一个异步方法并向它传递一个回调，例如一个Ajax请求，Web API 将处理一个事件。在这种情况下，事件将是Ajax接收消息的请求。当事件被引发时，它被添加到事件队列中，并且当调用堆栈为空并且正在调用事件队列时，将调用来自事件的回调。

鉴于事件队列的回调被放置在 UI 线程上的调用堆栈上，这是否意味着具有相当长的回调会导致 UI 被阻塞？异步编程不是为了防止这些类型的问题吗？

编辑：我刚刚意识到我可以通过打开浏览器来测试我的理论并通过创建自己来测试它，

setTimeout(function(){
   while(true){}
}, 500)

键入此内容时，UI 将冻结。

这是否意味着我是正确的？异步调用和异步代码仍然可以冻结 UI？

标签： javascriptasynchronous

Answer 1

异步代码最终将在主线程上执行。因此，当异步代码将在主线程上执行时，主线程将冻结。这意味着没有其他代码可以运行。异步代码不会立即开始执行。它会一直等到时间到了，等到异步代码执行的时间到了，它就会以同步的方式执行。

让我来看看你提供的例子。

setTimeout(function(){
   while(true){}
}, 500)

您提供给 setTimeout 的回调在 500 毫秒过去之前不会执行。当等待时间结束时，javascript引擎会将回调函数加载到主线程执行。由于它是一个无限循环，主线程将被无限期阻塞。没有其他代码有机会被执行。