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

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

settimeout javascript

-1

V K · 技术社区 · 5 年前

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

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

0 回复 | 直到 5 年前

Or Assayag 5 年前

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

Delwyn Pinto 5 年前

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前