AngularJS发票页面修改折扣时HTTP请求无响应问题求助

从你的描述和代码来看，问题出在每次修改折扣触发abc()函数时，都会重复定义$scope.loadadditionalvalues，再加上频繁发起HTTP请求却没有处理请求堆积的情况，这就导致后续输入时浏览器被未完成的请求占满资源，出现卡顿无响应的情况。我来给你拆解问题并给出修复方案：

问题分析 #

1. 重复定义函数：你在abc()内部每次都重新创建$scope.loadadditionalvalues函数实例，这不仅浪费内存，还可能导致作用域内的函数引用混乱。
2. 请求未取消：当用户快速修改折扣字段时，abc()会被频繁调用，每次都发起新的HTTP请求，但之前未完成的请求还处于pending状态，大量请求堆积会占用浏览器资源，导致页面卡顿。
3. 状态未重置：你设置了$scope.isAppInitialized = false，但请求完成后没有将其恢复为true，可能影响页面其他依赖这个状态的逻辑。

修复方案 #

1. 把loadadditionalvalues移到abc()外部定义

避免每次调用abc()都重新创建函数，提升性能并保持作用域清晰。

2. 添加请求取消机制

使用AngularJS的$q创建取消令牌，每次发起新请求前取消上一次未完成的请求，防止请求堆积。

3. 完善状态管理

请求完成后重置$scope.isAppInitialized状态，避免影响页面其他逻辑。

修改后的代码示例 #

// 定义取消令牌，用于取消未完成的请求
var canceler;

// 把loadadditionalvalues移到abc外部，避免重复定义
$scope.loadadditionalvalues = function (n, o) {
  // 如果之前有未完成的请求，先取消
  if (canceler) {
    canceler.resolve('取消之前的请求');
  }
  
  canceler = $q.defer();
  var arr = []; // 加上var声明，避免污染全局作用域
  $scope.isAppInitialized = false;
  
  var requestUrl = 'page_test.php?do=action_netvalues&action=ID';
  
  $http({ 
    url: requestUrl, 
    method: 'GET',
    timeout: canceler.promise // 绑定取消令牌
  }).then(function(response){
    $scope.isAppInitialized = true; // 请求完成后恢复状态
    if(typeof response.data.ERROR_MSG !== 'undefined' || 
       typeof response.data !== 'object' || 
       typeof response.data.message !== 'undefined' || 
       (typeof response.data.success !== 'undefined' && !response.data.success)) {
      console.log("error ");
    } else {
      $scope.staffel_liste = response.data;
    }
  }).catch(function(error) {
    $scope.isAppInitialized = true; // 即使请求被取消，也要恢复状态
    if (error.message !== '取消之前的请求') {
      console.log("请求出错或被取消:", error);
    }
  });
};

function abc(){
  // 直接调用已定义好的函数，不用每次重新定义
  $scope.loadadditionalvalues(null, null);
}

额外建议 #

如果折扣字段是实时监听输入，建议添加**防抖（debounce）**处理，比如设置300ms延迟，等用户输入停止后再调用abc()，进一步减少请求次数，提升页面流畅度。可以用AngularJS的ng-model-options="{ debounce: 300 }"绑定折扣字段。

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