JavaScript 是一种单线程语言，意味着在任何给定的时间只能执行一个任务，且任务按照他们被添加到事件队列中的顺序依次执行。这种机制使得 JavaScript 具有良好的可预测性和稳定性，但也会出现一些问题，其中之一就是任务可能会阻塞主线程导致页面冻结。那么，我们能否停止 JavaScript 执行，以避免这种情况的发生呢？
什么是主线程？
在谈论如何停止 JavaScript 执行之前，我们需要了解什么是主线程。当浏览器加载 HTML 文件时，它会从上到下逐行解析文件，并同时构建文档对象模型（DOM）和 CSS 对象模型（CSSOM）。在 DOM 和 CSSOM 构建完成后，浏览器开始执行 JavaScript 代码。
主线程是负责执行 DOM、CSSOM 和 JavaScript 代码的线程。如果 JavaScript 代码运行时间过长，主线程将无法处理其他任务，例如响应用户输入或更新屏幕显示，这会导致页面渲染卡顿、失去响应甚至崩溃。
如何停止 JavaScript 执行？
在 JavaScript 中，没有直接停止当前正在执行的代码的方法。然而，我们可以通过以下技术来实现相似的效果：
1. setTimeout 和 setInterval
setTimeout 和 setInterval 方法是 JavaScript 中的定时器函数。当调用这些函数时，它们将把相应的代码推迟到一定时间后执行。
例如，我们可以使用以下代码来延迟执行某个任务：
--------------------- - -- -------- -- ------
这段代码将等待 1000 毫秒（即 1 秒）后执行代码块中的内容。如果我们希望停止当前正在执行的代码，可以将其封装在一个函数中，并在需要停止时使用 clearTimeout 或 clearInterval 方法取消定时器。
--- ------- - --------------------- - -- ------ -- ------ -- - - ------- --------------------- - ---------------------- -- ------
上面的代码使用 setTimeout 创建了一个名为 timerId 的计时器，该计时器将在 5 秒后触发要暂停的代码。然后，我们设置另一个定时器，在 2 秒后调用 clearTimeout 方法取消之前创建的计时器，从而提前停止代码的执行。
2. Web Workers
Web Workers 是一种运行在后台线程中的 JavaScript 脚本。它们允许我们在主线程之外执行繁重的计算和其他长时间运行的任务，从而避免阻塞主线程。
要启动 Web Worker，我们可以使用以下代码：
-- --------- -------------------------------- --------------- - -- ---- --- -- ------- --- ------ - --- --------------------
在这个例子中，我们创建了一个名为 worker 的 Web Worker，并将代码放在一个名为 worker.js 的文件中。当我们需要向工作线程发送消息时，可以使用 worker.postMessage() 方法；当工作线程返回响应时，它会通过 onmessage 事件触发。
3. requestAnimationFrame
requestAnimationFrame 方法是一种优化的定时器，用于安排下一帧的绘制，以避免执行其他任务的时间过长而导致页面失去响应。
例如，我们可以使用以下代码来处理某个动画：
-------- --------- - -- ----- ------------------------------- -
这段代码将不断地调用 animate 函数，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8971