📅 最后修改于: 2023-12-03 14:54:32.450000 🧑 作者: Mango
在编写 JavaScript 时，我们可能会写一些比较耗时的代码，如大量数据的遍历、网络请求等。这些操作可能会导致 JavaScript 异常崩溃，或者导致浏览器无响应。为了避免这种情况，我们需要设置执行超时超时。
执行超时超时指的是在一定时间内，如果某个 JavaScript 操作没有完成，就抛出异常并停止当前操作。这样可以避免浏览器假死或异常崩溃的情况。
在现代浏览器中，我们可以使用 setTimeout 函数来实现执行超时超时机制。
function foo() {
// 耗时操作
}
setTimeout(function() {
throw Error('执行超时');
}, 5000); // 设置超时时间为 5 秒
foo(); // 执行耗时操作
上面的例子中，我们使用了 setTimeout 函数，设置在 5 秒内执行完毕。如果执行 foo() 耗费的时间超过 5 秒，就会抛出异常并停止当前操作。
除了 JavaScript 运行超时，我们还需要考虑 CSS 加载超时的情况。如果页面中引用的 CSS 文件加载过慢或者没有响应，就会影响页面的显示效果，甚至影响用户体验。
为了避免这种情况，我们可以设置 CSS 加载超时。同样使用 setTimeout 函数来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 加载超时测试</title>
<link rel="stylesheet" href="test.css" onload="clearTimeout(timeoutId)">
</head>
<body>
<h1>Hello, World!</h1>
<script>
const timeoutId = setTimeout(function() {
const h1 = document.querySelector('h1');
h1.innerText = 'CSS 加载超时，请检查网络或文件路径';
h1.style.color = 'red';
}, 3000); // 设置超时时间为 3 秒
</script>
</body>
</html>
在 HTML 文件中，我们可以通过在 link 标签中定义 onload 属性。当 CSS 文件加载完成后，这里会自动执行相应的代码。我们在这里设置了一个 3 秒后执行的函数，如果加载完成前超过 3 秒，就会抛出异常并停止当前操作。
执行超时超时、CSS 加载超时都是为了避免浏览器假死或异常崩溃的情况。但是，我们不应该设置过短的超时时间，否则可能会影响正常的操作。合理设置执行超时超时和 CSS 加载超时，可以提高用户体验，避免出现异常情况，提升页面性能。