gpt4 book ai didi

javascript - 如何延迟切换变量的值?

转载 作者:行者123 更新时间:2023-11-28 01:17:07 24 4
gpt4 key购买 nike

我的 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 - 如何延迟切换变量的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23698864/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com