AngularJS：$http作用域外变量无法更新及加载更多致浏览器崩溃

问题根源分析 #

先帮你拆解下两个核心问题：

1. counter看似未更新的误导：你在$http请求外面写的console.log(counter)会先执行——因为$http是异步操作，此时请求还没完成，counter自然还是初始值0。但实际上请求成功后counter已经被正确更新了，这只是代码执行时序的问题，不是变量没更新。
2. 浏览器崩溃的核心原因：
   • 每次点击「加载更多」都重新请求整个data.json，完全没必要，重复请求不仅浪费资源，还会导致每次都要重新处理全量数据。
   • 没有判断数据是否加载完毕：当counter已经接近或等于数组总长度时，循环里i < innerCounter+5依然会执行，去访问response.data[i]（此时i已经超出数组索引范围，得到undefined），不断往$scope.data里塞无效数据，最终导致内存溢出，浏览器崩溃。
   • 外部定义的counter变量在AngularJS的作用域外，可能存在作用域绑定问题，不利于状态管理。

修复后的完整代码方案 #

我们把数据缓存起来，用$scope管理计数器，同时添加加载完成的判断：

angular.module('myApp', [])
.controller('myController', function($scope, $http) {
    $scope.data = [];
    $scope.counter = 0; // 把counter放到$scope里，方便管理和监控
    let fullData = []; // 缓存全量数据，避免重复请求

    // 初始加载数据
    $http({
        method: "GET",
        url: "data.json"
    }).then(function onSuccess(response) {
        fullData = response.data; // 缓存全量数据
        // 加载前5条
        loadNextBatch();
        console.log('初始加载完成，当前数据长度：', $scope.data.length);
    }).catch(function onError(response) {
        console.log("请求数据失败：", response);
    });

    // 封装加载下一批的逻辑
    function loadNextBatch() {
        const batchSize = 5;
        const endIndex = Math.min($scope.counter + batchSize, fullData.length);
        for (let i = $scope.counter; i < endIndex; i++) {
            $scope.data.push(fullData[i]);
        }
        $scope.counter = endIndex;
    }

    // 加载更多函数
    $scope.loadMore = function() {
        // 判断是否已经加载完所有数据
        if ($scope.counter >= fullData.length) {
            alert('已经没有更多数据了');
            return;
        }
        loadNextBatch();
        console.log('加载更多完成，当前数据长度：', $scope.data.length);
    };
});

关键优化点 #

• 缓存全量数据：只请求一次data.json，把数据存在fullData变量里，后续加载更多直接从缓存取，避免重复请求。
• 用$scope管理计数器：把counter放到$scope中，符合AngularJS的作用域管理规范，也方便调试和监控。
• 添加边界判断：在loadMore里先检查是否已经加载完所有数据，避免无效循环和无效数据的添加。
• 封装加载逻辑：把加载批量数据的逻辑抽成loadNextBatch函数，代码更简洁，复用性更强。
• 使用Math.min处理边界：确保循环的结束索引不会超出数组长度，避免访问不存在的数组项。

额外建议 #

如果你的data.json数据量非常大，建议后端做分页接口，而不是一次性请求全量数据——这样前端只需要请求对应页码的数据，性能会更好。

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