只有在经过一定时间后，才使用$timeout在服务中执行函数

Question

http://jsbin.com/vozohexomo/4/edit?js，控制台，输出

我有一个服务，它进行$http调用和两个指令。一个指令负责将数据传递给服务（my-input），另一个指令则负责处理服务的结果（my-output）。

这里的目标是使用户能够执行实时搜索并实时显示结果。

现在它所做的只是给查询的执行增加一个延迟，这是毫无意义的。我该如何让它只在休息一段时间后执行查询？

app.service('httpFactory', function ($rootScope, $timeout) {  
  this.doQuery = function (query) {
    $timeout(function(){
      console.log("Executing: " + query);
      $rootScope.data = "the result of query " + query;
    }, 500);
  };
});
app.directive('myInput', ['httpFactory', function(httpFactory) {
  var link = function(scope, elem) {
    scope.query = '';
    scope.$watch('query', function() {
      httpFactory.doQuery(scope.query);
    });
  };
  return {
    link: link,
    restrict: 'E',
    scope: {query: '='},
    template: '<input ng-model="query">'
  };
}]);
app.directive('myOutput', function($rootScope) {  
  var link = function(scope, elem) {
    $rootScope.$watch('data', function(){
      console.log("I see " + $rootScope.data);
    });
  };
  return {
    link: link,
    restrict: 'E',
    template: '<div>I see {{data}}</div>'
  };
});

Answer 1

http://jsbin.com/vozohexomo/5/edit?js，控制台，输出

事实证明，这个解决方案比我想象的要简单。只需将每个查询保存在tempQuery中，然后只执行$timeout延迟后匹配的查询。

app.service('httpFactory', function ($rootScope, $timeout) {
  var tempQuery;
  this.doQuery = function (query) {
    tempQuery = query;
    $timeout(function(){
      if (query == tempQuery) {
        console.log("Executing: " + query);
        $rootScope.data = "the result of query " + query;
      }
    }, 500);
  };
});