AngularJS 1.6.6中$timeout失效求助：已注入但未生效

我懂你现在卡在哪了——明明已经在控制器里注入了$timeout，甚至把它挪到HTTP响应的回调里，还是没法让$scope.showInfo在3秒后自动变回false，用的是AngularJS 1.6.6搭配Laravel 5.2对吧？我来帮你排查下常见问题，给你具体的解决办法。

先排查最容易踩的坑 #

1. 确认$timeout的依赖注入是正确的

很多时候我们会在控制器里写了$timeout，但忘了在依赖数组里显式声明（AngularJS 1.x的显式注入是很重要的，尤其是压缩代码的时候）。你的控制器定义应该像这样：

// 假设你的应用模块叫attendanceApp
angular.module('attendanceApp').controller('AttendanceController', 
['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    // 你的submitAttendance函数写在这里
}]);

如果只是在函数参数里写了$timeout，但没在前面的数组里声明，AngularJS可能找不到这个服务，导致它不工作。

2. 修正代码里的变量名冲突问题

看你贴的代码片段里有var response = response.data;——这里你用同一个变量名覆盖了回调里的原始response对象，虽然这不一定直接导致$timeout失效，但会导致潜在的逻辑问题，先把这个改了，比如改成var resData = response.data;。

3. 确保$timeout的语法正确

$timeout的第一个参数必须是要执行的函数，而不是直接写赋值语句。正确的写法应该是把$scope.showInfo = false;放在一个匿名函数里传给$timeout。

修正后的完整代码示例 #

结合上面的点，你的submitAttendance函数应该改成这样：

$scope.submitAttendance = function(attData) {
    $http({
        method: 'POST',
        url: '/api/save/attendance',
        headers: {
            'Content-Type' : 'application/json'
        },
        data: attData
    }).then(function successCallback(response) {
        var resData = response.data; // 避免变量名冲突
        if (resData == 1) {
            $scope.msg = 'Attendance saved successfully!';
            $scope.showInfo = true;
            
            // 正确使用$timeout：第一个参数是执行函数，第二个是延迟毫秒数
            $timeout(function() {
                $scope.showInfo = false;
            }, 3000); // 3000毫秒 = 3秒
        } else {
            $scope.msg = 'Failed to save attendance';
            $scope.showInfo = true;
            // 失败也可以加个自动隐藏提示的逻辑
            $timeout(function() {
                $scope.showInfo = false;
            }, 3000);
        }
    }, function errorCallback(error) {
        // 别忘了处理HTTP请求失败的情况，用户体验更好
        console.error('Request error:', error);
        $scope.msg = 'Request failed, please try again later';
        $scope.showInfo = true;
        $timeout(function() {
            $scope.showInfo = false;
        }, 3000);
    });
};

如果还是不生效的极端情况 #

如果上面的步骤都做了还是不行，可能是作用域的digest循环没触发（虽然$timeout本身会自动触发digest，但某些特殊场景下可能有问题），可以手动在$timeout回调里加上$scope.$apply()：

$timeout(function() {
    $scope.showInfo = false;
    $scope.$apply(); // 手动触发digest循环
}, 3000);

最后再检查一点 #

确保你的$scope.showInfo确实是绑定到页面上的元素了，比如页面上有类似这样的代码：

<div ng-show="showInfo" class="info-message">{{msg}}</div>

如果绑定错了变量名，那就算$timeout生效了，页面也不会有变化哦。

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