javascript之如何延迟切换变量的值

程序猿阅读：77 2026-01-12 12:40:42 评论：0

我的 AngularJS 代码获取如下数据:

this.retrieve = function (contentStatusId) { 
    $http({ 
        url: '/api/Content/Retrieve', 
        method: "GET", 
        params: { 
            contentStatusId: contentStatusId, 
        } 
    }).success(function (result) { 
        home.grid.data = angular.copy(result); 
    }); 
};

我有一个名为 message 的变量，它附加到我的应用程序 Controller 的 $scope 中。

如何修改此设置，以便在检索之前将 message 变量设置为“正在获取”如果检索时间超过一秒并且当检索返回message 变量立即设置为 null？

我想使用某种可重用函数来做到这一点，因为我很多次都有这样的获取。

可以

请您参考如下方法:

看看这个 plunker .

您可以实现显示“正在获取”消息的指令:

app.directive('fetching', ['$rootScope', '$timeout', function($rootScope, $timeout) { 
  return { 
    restrict: 'E', 
    replace: true, 
    template: '<div class="fetching" ng-if="pending > 0">fetching...</div>', 
    link: function(scope, elem, attrs, ngModelCtrl) { 
      scope.pending = 0; 
 
      $rootScope.$on('ShowFetching', function() { 
        $timeout(function() { 
          scope.pending++; 
        }, 1000); 
      }); 
 
      $rootScope.$on('HideFetching', function() { 
        scope.pending--; 
      }); 
    } 
  }; 
}]);

可以在模板中的某个位置使用(在 ng-view 之外，如果有的话)

<body ng-controller="MainCtrl as ctrl"> 
    <fetching></fetching> 
    <button ng-click="ctrl.startFastAjax()">Fast Ajax</button> 
    <button ng-click="ctrl.startSlowAjax()">Slow Ajax</button> 
</body>

现在，每当您初始化 ajax 调用时，您都会$emit 'ShowFetching' 事件，并且每当它完成(成功或错误)时，您$发出 'HideFetching' 事件。这可以通过 http 拦截器集中完成( checkout $http docs )。

诀窍是您以 1 秒的延迟递增 pending 计数器。这意味着它可能会先递减，但这没关系，因为呈现消息的条件是 pending > 0。

编辑:

由于上面的例子在某些情况下可能会闪烁，这里是一个重新设计的plunker那不这样做。在真实的应用程序中，将 Math.floor((Math.random() * 1000000) + 1).toString() 替换为 GUID 的某些国王。

这个想法是，在递减之前，检查是否有待处理的任务来为该特定源(即 requestId)执行增量操作。如果是，则取消任务并且不执行任何操作。

标签:JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。