Question

我的应用程序有一个$ rootScope变量，当有Ajax时，该变量设置为非零值请求正在进行中我设置了一个旋转轮来显示这个变量的值是多少比零。伪代码：

$rootScope.pendingRequests > 0 then show the spinning wheel

结果是，对于非常快的请求，车轮会短暂闪烁。我想通过仅在请求已经进行超过500ms的情况下出现轮子来避免这种闪光。我的想法是使用另一个名为$ rootScope.pendingRequestsDebounced的变量，并使其遵循$ rootScope.pendingRequests的值，如下所示：

如果$ rootScope.pendingRequests在* 至少500毫秒 * s时的值大于0，则设置：$ rootScope.pendingRequestsDebounced = $ rootScope.pendingRequests
< / LI>
如果$ rootScope.pendingRequests等于0，则立即设置：$ rootScope.pendingRequestsDebounced = $ rootScope.pendingRequests（没有延迟）。

Answer 1

您可以使用$ timeout服务在500毫秒后启动，以检查待处理的请求：

if ($rootScope.pendingRequests == 0)
{
     $rootScope.pendingRequestsDebounced = $rootScope.pendingRequests;
}
else
{
     var currentTimeoutHandler = $timeout(function()
     {
        $rootScope.pendingRequestsDebounced = $rootScope.pendingRequests;
        //You can keep checking 500 ms later by creating new timeout call right in here
     },500);
}

编辑：传递给$ timeout的函数只执行一次，在这种情况下500ms后执行。如果你想只执行一次该功能（看起来你是这样），那么上面的代码就足够了。但是，如果你想每隔500毫秒调用一个函数，你需要写：

var currentTimeoutHandler = $timeout(checkFn, 500);  
function checkFn() 
{ 
    $rootScope.pendingRequestsDebounced = $rootScope.pendingRequests; 
    currentTimeoutHandler = $timeout(checkFn, 500);  //Re-execute this function after 500ms
};

Answer 2

我想你可以做这样的事情

var timeoutTask = null;

$scope.showLoader = false;
$rootScope.$watch('pendingRequests', function(val, oldVal) {
    $timeout.cancel(timeoutTask);
    if (val) {
        timeoutTask = $timeout(function() {
            $scope.showLoader = true;
        },500);
    }
});

标记

<div id="loader" ng-show="showLoader"></div>

Answer 3

创建一个计时器并将其设置为500毫秒，每当它达到（或低于）零时，将其重置为500毫秒并检查旋转值。

使用$ watch监控值。一旦它变为零，从上面杀死计时器并继续。

如何使变量的值等于另一个但延迟设置？

3 个答案: