在 javascript 中使用 SetTimeOut 时浏览器冻结到 运行 更新 UI 的函数
Browser freezing while using SetTimeOut in javascript to run a function which updates the UI
我正在使用下面提到的代码来调用函数 (addCard)，该函数将图像添加到网页。浏览器因此而冻结。如果我在 setTimeOut 中调用一个不更新 UI 的简单函数，则浏览器不会冻结。那么，我们是不是不能在setTimeOut回调函数中更新UI。据我所知，浏览器的 javascript 运行time 是单线程的。因此，没有单独的 UI 线程。那为什么浏览器会死机呢？因为回调将在主线程中 运行 。这是代码：
while(user.Score > dealer.Score){
setTimeout(function(){addCard(dealer);},2000);
}
你陷入了无限循环，因为 user.Score > dealer.Score 永远不会为假。此外，你得到递归，因为你每 2 秒调用同一个函数，它自己创建递归。浏览器内存不足，卡住了。
浏览器死机的简单解释是浏览器运行资源不足
由于 addCard(dealer) 函数在 setTimeout() 之外工作，这让我相信超时的实现是原因。最明显的一个是 UI 更新完成所需的时间比线程可用的时间更长。由于 while 循环将继续执行，最终调用堆栈将填满。这也将解释为什么浏览器冻结而没有抛出任何错误。
您应该能够通过调试代码来确认此行为。但是，我建议您修改逻辑，而不是尝试解决问题的方法。
我正在使用下面提到的代码来调用函数 (addCard)，该函数将图像添加到网页。浏览器因此而冻结。如果我在 setTimeOut 中调用一个不更新 UI 的简单函数，则浏览器不会冻结。那么，我们是不是不能在setTimeOut回调函数中更新UI。据我所知，浏览器的 javascript 运行time 是单线程的。因此，没有单独的 UI 线程。那为什么浏览器会死机呢？因为回调将在主线程中 运行 。这是代码：
while(user.Score > dealer.Score){
setTimeout(function(){addCard(dealer);},2000);
}
你陷入了无限循环，因为 user.Score > dealer.Score 永远不会为假。此外，你得到递归，因为你每 2 秒调用同一个函数，它自己创建递归。浏览器内存不足，卡住了。
浏览器死机的简单解释是浏览器运行资源不足
由于 addCard(dealer) 函数在 setTimeout() 之外工作，这让我相信超时的实现是原因。最明显的一个是 UI 更新完成所需的时间比线程可用的时间更长。由于 while 循环将继续执行，最终调用堆栈将填满。这也将解释为什么浏览器冻结而没有抛出任何错误。
您应该能够通过调试代码来确认此行为。但是，我建议您修改逻辑，而不是尝试解决问题的方法。