AngularJS 1.6会话计时器$watch重复绑定及解绑函数未定义问题

我完全懂你遇到的这个糟心问题——每次调用会话计时器函数，$scope.$watch就会反复绑定到同一个变量上，而且想调用解绑函数时还提示未定义。这大概率是因为你没把解绑函数的引用持久化保存，每次创建新监听前也没清理旧的监听。

下面给你一套亲测有效的解决方法：

核心思路 #

1. 先在$scope（或控制器的私有变量）上保存一个解绑函数的引用，初始设为null；
2. 每次创建新的$watch前，先检查这个引用是否存在，存在就调用它清理旧监听；
3. 将新$watch返回的解绑函数赋值给这个引用；
4. 控制器销毁时主动清理监听，避免内存泄漏。

代码示例 #

// 在控制器初始化时，先声明解绑函数的引用
$scope.unwatchSessionTimer = null;

function startSessionTimer() {
  // 第一步：先清理已存在的旧监听
  if ($scope.unwatchSessionTimer) {
    $scope.unwatchSessionTimer();
    $scope.unwatchSessionTimer = null; // 重置引用，防止重复调用
  }

  // 第二步：绑定新的$watch，并保存解绑函数
  $scope.unwatchSessionTimer = $scope.$watch('sessionCountdown', function(newVal, oldVal) {
    // 只有当值真正变化时才执行逻辑
    if (newVal !== oldVal) {
      console.log('倒计时更新:', newVal);
      // 处理会话过期逻辑
      if (newVal <= 0) {
        // 比如跳转登录页、清理会话数据
        handleSessionExpire();
      }
    }
  });
}

// 关键：控制器销毁时清理监听，避免内存泄漏
$scope.$on('$destroy', function() {
  if ($scope.unwatchSessionTimer) {
    $scope.unwatchSessionTimer();
  }
});

为什么你之前的方法无效？ #

很大可能是你把解绑函数存在了函数内部的局部变量里，每次调用startSessionTimer()时，旧的解绑函数引用就被覆盖或丢失了，导致后续调用解绑时找不到对应的函数。而把引用存在$scope上（或者控制器的私有变量里），就能在每次调用函数时拿到之前的解绑函数，实现正确清理。

另外要注意：$watch的第一个参数如果是字符串，要确保对应的$scope.sessionCountdown变量确实存在且命名正确；如果是函数，也要保证函数引用的是正确的变量。

内容的提问来源于stack exchange，提问作者pengz