Angular中使用$watch和$timeout的例子

使用过Angular的小伙伴应该对$watch这个监听不陌生，它主要用于监听模型的变化，当你的模型部分发生变化时它会通知你。我在最近的平台管理开发中，也用到这个牛逼哄哄的Angular，在做filter的时候不可以避免的用到$watch监听。当时我的想法就是搜索的时候不需要点击搜索按钮，这样在用户体验上也是极好的，避免了输入后再次点击的操作步骤。然后，当$watch监听的时候一开始代码是这样的

$scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        //filterOptions发生变化时，调用方法
        $scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);
    }
}, true);

这样做，看上去没什么大问题，每次输入的时候就拉一次数据。但是！但是！但是！重要的事情说三遍！当用户输入“张三”这个搜索字的时候，代码是这样执行的，“张”字拉了一次数据，“三”字有拉了一次数据。好了嘛，这还是两个字，要是输入十个字呢，服务器就哭了，服务器就来打前端了。这个时候就需要用到Angular中的这货了——$timeout，他是angular中的一个定时器。针对我们搜索来说，我们在监听filterOptions发生变化时，不要马上请求，给他0.8秒的一个等待的时间，如果这0.8秒内filterOptions没有又一次发生变化，那么就请求拉数据，否则就继续输入。代码如下：

$scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            if (timeout) $timeout.cancel(timeout);
            timeout = $timeout(function() {
                $scope.getPagedDataAsync('admin/bill/'+$stateParams.page+'?pageCount='+$scope.paginationConf.itemsPerPage,$scope.filterOptions);
            }, 800);
        }
    }, true);

这里顺便强调下$timeOut.cancel()方法，它和js原生的setTimeout()函数不同，$timeOut()函数会返回一个promise。和其他的promise一样，你可以绑定$timeOut的resolved和rejected时间。然而更重要的是，你可以通过将这个promise传递给$timeOut.cancel()方法来取消掉潜在的定时器。在Angular应用中，这一点非常的重要，因为定时器可以结束执行那些不再与应用状态和用户界面相关的代码。最佳情形中，这些过程都会悄悄的发生；在不好的情况下，它会引起不可预测的行为并导致很差的用户体验。为了让应用顺畅的运行，你应该总是把握好你的$timeOut定时器；你需要在相应的控制器和指令接收到$destory事件时调用$timeOut.cancel()方法。