当浏览器的某行发生错误时,有多少JavaScript停止工作?

时间:2018-09-09 11:46:57

标签: javascript browser

网页中的

JS由多个标签组成,这些标签加载文件并执行它们,或者在使用内联标签的情况下直接执行代码。现在假设其中一个脚本由于错误而停止在某个特定的行上执行,那么其他脚本也会停止吗?换句话说,浏览器在发生错误时挂起一段代码的解释和执行的动作是在标签级别还是全局级别执行的?

1 个答案:

答案 0 :(得分:7)

  

换句话说,浏览器在发生错误时挂起一段代码的解释和执行的动作是在标签级别还是全局级别执行的?

那要看。

语法错误意味着,由于无法解析代码,因此给定的script标记加载的整个脚本将无法工作。

运行时错误仅表示发生错误时发生的一切都将终止(如果它无法处理错误)。但是,只有在发生错误时正在运行的作业才被终止;由相同的script标签加载的其他代码将继续起作用。

示例:该代码中包含语法错误,因此所有代码均无效:

document.getElementById("btn").addEventListener("click", function() {
  console.log("Clicked");
}, false);

// This is the syntax error:
if
Clicking this button doesn't do anything:
<br><input type="button" id="btn" value="Click me">

尽管在挂接第一个事件处理程序和挂接第二个事件处理程序之间有一个 runtime 错误。因此,第二个处理程序永远不会挂上,但是第一个处理程序会继续工作:

document.getElementById("btn1").addEventListener("click", function() {
  console.log("Button 1 clicked");
}, false);

// This is the runtime error:
null.foo();

document.getElementById("btn2").addEventListener("click", function() {
  console.log("Button 2 clicked");
}, false);
<div>Clicking this button works:</div>
<input type="button" id="btn1" value="Button 1">

<div>Clicking this button doesn't do anything:</div>
<input type="button" id="btn2" value="Button 2">

在这两种情况下,这仅会影响由script元素加载的代码,因为运行该代码是一项工作;运行任何后续script元素的内容是一项新工作。因此,这里的 first third 按钮有效,但是第二个按钮无效,因为第三个按钮是由单独的作业连接的:

<div>Clicking this button works:</div>
<input type="button" id="btn1" value="Button 1">

<div>Clicking this button doesn't do anything:</div>
<input type="button" id="btn2" value="Button 2">

<div>Clicking this button works:</div>
<input type="button" id="btn3" value="Button 3">

<script>
// First job
document.getElementById("btn1").addEventListener("click", function() {
  console.log("Button 1 clicked");
}, false);

// This is the runtime error:
null.foo();

document.getElementById("btn2").addEventListener("click", function() {
  console.log("Button 2 clicked");
}, false);
</script>

<script>
// Second job
document.getElementById("btn3").addEventListener("click", function() {
  console.log("Button 3 clicked");
}, false);
</script>

当然,如果后续的script依赖于早期script中的某项无效,那么它将无法正常工作,但是代码将(尝试)运行。