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

vij*_*ant 4 javascript browser

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

T.J*_*der 7

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

那要看.

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

运行时错误仅表示发生错误时发生的任何事情都将终止(如果它没有处理错误).但只有在错误发生时正在运行的作业才会终止; 由同一script标记加载的其他代码将继续工作.

示例:此代码中包含语法错误,因此所有代码都不起作用:

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

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

然而,在连接第一个事件处理程序和挂接第二个事件处理程序之间存在运行时错误.因此,第二个处理程序从未连接,但第一个继续工作:

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);
Run Code Online (Sandbox Code Playgroud)
<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">
Run Code Online (Sandbox Code Playgroud)

在这两种情况下,这只会影响该script元素加载的代码,因为运行它是一项工作; 运行任何后续script元素的内容是一项新工作.所以第一个第三个按钮在这里工作,但第二按钮没有,因为第三按钮由一个单独的工作连接:

<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>
Run Code Online (Sandbox Code Playgroud)

当然,如果后来script依赖于前面script那些不起作用的东西,那么它就不能正常工作 - 但代码会(尝试)运行.