Question

这是我的情况，我正在使用select2库，因此我可以控制用户可以快速将项目添加到输入框。这些项绑定到名为$scope.selectedServices.values的数组。因此，当一个项目被添加时，它会被添加到该数组中，同样如果一个项目被删除，那么它将从该数组中删除。

我的问题是，我想设置一个$watch，这样每次列表更改时我都可以更新数据库：

$scope.$watch('selectedServices.values', function() {
    // Call web service here with $http post
});

但是如果有多个快速变化（比如半秒钟内的几处变化），我就不想发起多个$http来电。

我是否可以设置延迟，这样它可能只会在0.5秒后触发？这样，如果有快速更改，它将全部包含在一个Web服务调用中。

谢谢

Answer 1

您可以编写队列服务。大纲可能是这样的：

function queueService($timeout, $http) {
    this.queue   = [];
    this.running = false;

    this.enQueue = function(uri) {
        queue.push(uri);
        if (!this.running) {
            $timeout(this.handle, 500);
            this.running = true;
        }
    }

    this.handle = function() {
        // Make your single call here instead of multiple calls
        for (var i in this.queue) {
            $http.get(i); 
        }

        this.queue   = [];
        this.running = false;
    }
}

请注意，这更像是伪代码，实际上可能无法正常显示。

修改
我刚刚意识到你想在$ watch中使用这个功能。你可能为了这个问题简化了你的例子，但我仍然想指出$ watch可能会比预期更频繁地开火。建议使用一些逻辑检查您的值是否实际发生了变化！

Answer 2

这是Reactive Extensions的完美用例：

只需按照文档中的说明添加库，然后使用它：

angular.module('somemodule', ['rx'])
    .controller('someCtrl', function($scope, rx) {

        $scope
            .$toObservable('selectedServices.values')
            .throttle(500)
            .distinctUntilChanged()
            .subscribe(function(val){
                 // To something like:
                 // $scope.results = val;
            });

在Angular

2 个答案: