代码之家 › 专栏 › 技术社区 › V K

在javascript中使用SetTimeOut运行更新UI的函数时浏览器冻结

settimeout javascript

-1

V K · 技术社区 · 4 年前

我使用下面提到的代码来调用一个函数(addCard),它将图像添加到网页中。浏览器因此冻结。如果我在setTimeOut中调用一个不更新UI的简单函数,那么浏览器不会冻结。所以,我们不能在setTimeOut回调函数中更新UI。据我所知,浏览器的javascript运行时是单线程的。因此,没有单独的UI线程。那为什么浏览器会冻结呢?因为回调将在主线程中运行。代码如下:

 while(user.Score > dealer.Score){
        
        setTimeout(function(){addCard(dealer);},2000);
    }

0 回复 | 直到 4 年前

Or Assayag 4 年前

你陷入了无限循环,因为 user.Score > dealer.Score 永远不会是假的。另外,由于每2秒调用一个函数,因此可以得到递归,这会自动创建递归。浏览器内存不足,卡住了。

Delwyn Pinto 4 年前

浏览器冻结的简单解释是浏览器资源耗尽。

自从 addCard(dealer) 函数在setTimeout()之外工作时,它使我相信超时的实现是原因。最明显的一点是,UI更新的完成时间比线程可用的时间要长。由于while循环将继续执行,最终调用堆栈将被填满。这也将解释为什么浏览器冻结而不抛出任何错误。

您应该能够通过调试代码来确认此行为。不过,我建议您修改逻辑,而不是尝试解决这个问题。

推荐文章

Gourav Srivastava · 我应该如何使用回调来获得期望的结果?

2 年前

Nikos Tzoun · addEventListener[重复]中带有参数“this”的SetTimeout调用函数

7 年前

Mer · 文本输入中的打字机效果在Firefox中不起作用

7 年前

Abido · setTimeout节点内存泄漏(Meteor)

7 年前

aman.s · 选中复选框5秒后刷新JavaScript页面

7 年前

Sanju · 如何在每次函数调用之前等待setTimeout?

7 年前

Casey Crookston · 在计时器上重复/循环ajax调用-即使超时

7 年前

Alperb · 如何在按键功能中设置超时功能

7 年前

DannyArcher · 我可以在设置间隔中插入多个设置超时吗?

7 年前

CraZyDroiD · 在reactjs中使用setTimeout连续更改状态

7 年前