随着 Web 应用程序变得越来越复杂，前端开发人员需要使用各种工具和技术来管理和维护应用程序。AngularJS 是一个流行的框架，它提供了一系列功能和指令，使开发人员能够轻松地构建复杂的单页应用程序（SPA）。在某些情况下，我们可能需要在路由更改时取消 $timeout，以避免潜在的内存泄漏或其他问题。本文将详细介绍如何在 AngularJS 中实现这一目标，并提供示例代码和学习指南。
什么是 $timeout？
在 AngularJS 中，$timeout 是一个服务，它允许您在指定的时间后执行一个函数。$timeout 的语法如下：
$timeout(fn, delay, [invokeApply], [Pass]);
其中：
fn：要执行的函数。delay：等待执行的时间，单位为毫秒。invokeApply：布尔值，指示是否应调用 $apply() 函数。Pass：传递给函数的参数。
例如，以下代码将在 3000 毫秒后向控制台输出 "Hello World!"：
$timeout(function () {
console.log('Hello World!');
}, 3000);为什么需要在路由更改时取消 $timeout？
当用户离开一个页面时，AngularJS 会自动注销该页面上的所有作用域和定时器。然而，在某些情况下，可能需要手动取消 $timeout 定时器，以避免潜在的内存泄漏或其他问题。
考虑以下场景：假设您有一个计时器，它每隔 5 秒钟向服务器发送一个 AJAX 请求。如果用户离开了这个页面，但计时器仍在继续运行，那么它将继续发送 AJAX 请求，这就会导致资源浪费和性能问题。为了解决这个问题，我们可以手动取消计时器，以确保它不会在用户离开页面后继续运行。
如何在路由更改时取消 $timeout？
要在路由更改时取消 $timeout，我们可以使用 AngularJS 的 $rootScope 和 $location 服务。具体来说，我们可以注册 $rootScope 的 $on() 方法，以侦听 $routeChangeStart 事件，并在该事件被触发时取消所有未完成的 $timeout 定时器。
以下是实现此目标的代码：
-- -------------------- ---- -------
---------------------------- --------- ---------- -
-- --------- -- ---
--- ---------- - ---
-- -- ----------------- ------
----------------------------------- ---------- -
-- ------------
--------------------------- ------------------- -
---------------------------
---
---
-- ----- -------- ------------
-- --- --------- - ------------ -------
-- ----- -- ------
---------------------------
---上面的代码定义了一个名为 app 的 AngularJS 模块，并在其 run() 方法中注册了 $rootScope 上的 $routeChangeStart 事件侦听器。该事件会在每次路由更改时触发。
在事件处理程序函数中，我们使用 angular.forEach() 遍历未完成的定时器 ID 列表，并使用 $timeout.cancel() 方法取消每个定时器。这将确保所有未完成的定时器在路由更改时被正确地取消。
在需要使用 $timeout 的代码中，我们可以像往常一样使用 $timeout() 函数创建定时器，并将新定时器 ID 添加到列表中以便
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27562