angularjs按条件进行串行操作答案

【问题标题】：angularjs make serial actions by conditionangularjs按条件进行串行操作
【发布时间】：2014-06-30 15:01:23
【问题描述】：

我想在我的应用中执行用户友好的操作。问题是：我有一个按钮。当用户“mousedown”时，我向服务器发送 ajax 查询以获取一些信息。我想要的是在此按钮上的用户“mouseup”之后显示该信息only。换句话说，当他释放鼠标按钮时。问题是用户可以在服务器响应我的 ajax 调用之前或之后释放鼠标按钮，因为我仍然希望仅在释放按钮后显示信息。

我认为我可以用延迟的东西来做到这一点，因为我在这方面没有太多经验。你能给我一些信息，如何做到这一点？

示例代码：

.html
<input type='button' ng-start='start()' ng-end='end()' >

.js
$scope.start = function(){
    $http.get(url, data).success(function(result){})
}
$scope.end = function(){
    //show result from first function
}

【问题讨论】：

标签： ajax angularjs deferred

【解决方案1】：

尝试使用 $q 来做到这一点，但似乎不需要 $q。

.html
<input type='button' ng-mousedown='start()' ng-mouseup='end()' >
<div ng-show="loaded && resolved" ng-bind="processedResult"></div>

.js
$scope.start = function(){
    $scope.resolved = false;
    $scope.loaded = false;
    $http.get(url, data).success(function(result){
        $scope.loaded = true;
        $scope.processedResult = processResult(result);
    });
};
$scope.end = function(){ 
    $scope.resolved = true; 
};

【讨论】：

能否请您展示一下，您将如何在 end() 函数中显示信息？例如 console.log(???)
什么样的信息？ $http.get 的结果？它可能还没有准备好 - 当用户在我们从服务器收到答案之前释放按钮时。但无论如何你可以使用观察者，它无论如何都会触发：$scope.end = function(){ $scope.$watch('data', function(data){ if(!!data){console.log($scope.data);} }); $scope.resolved = true; };
是的，$http.get 的结果。看来 watcher 还不够漂亮……我还在想 end() 的 promise 和 .then 方法
为什么在 end() 函数中需要数据？您已经在回调时拥有它。如果 .then 在 end() 内 - 如果用户在收到 $http 的结果时按住鼠标按钮，它将不可用。
只有在用户释放按钮后我才需要结果。但用户可以在 ajax 查询完成之前释放按钮。在这种情况下，我应该等到 $http.get 执行... $watch 应该可以工作，我想，你会试试的。但我内心的声音说，这应该是更好的解决方案......

【解决方案2】：

我想，我已经通过漂亮的承诺功能解决了我的问题。

.html
<input type='button' ng-start='start()' ng-end='end()' >

.js

$scope.start = function() {

    promise = $q.when($scope.ApiCall())
        .then(function(result){
            return result.data;
        }, function(error){
            console.log(error);
        })
    ;
};

$scope.end = function() {

    promise.then(function(result){
        processResult(result.datat);
    });

};

$scope.ApiCall = function(){

    var data = {};

    return $http.get(url, {params: data});
}

【讨论】：

$http 方法本身返回一个承诺。我会更新我的答案。
好吧，没关系。你试过这个例子吗？它在这两种情况下都有效吗？我仍然不明白你为什么不在简单的 .success 函数中准备接收到的数据，并且只在用户释放按钮时才显示它。正如我看到你的问题，在哪里处理 $http 的结果没有区别。您唯一需要的是在用户释放按钮之前不显示处理结果，不是吗？我认为，在这种情况下，额外的 $q 会使逻辑过于复杂。实际上，您在这里有两个承诺。
看，在您的版本中，processResult() 方法将在 $http.get 执行后立即调用，而不管用户是否按住或释放按钮。我说的对吗？
所以，假设在 processResult() 中我想要 console.log(result)，它会在 $http.get 执行后立即出现，即使你有 $scope.resolved，我不明白我是如何阻止执行 console.log...
等等。在您的问题中，您不想向用户显示回复。在这两个事件发生之前，ng-show 不会向用户显示它。出于某种我无法理解的原因，您想在这两个事件之后执行代码？