脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS中$watch和$timeout的使用

AngularJS中$watch和$timeout的使用示例

 更新时间：2016年09月20日 11:45:58   投稿：daisy  
这篇文章给大家介绍了AngularJS中$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);

总结

以上就是这篇文章的全部内容，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

相关文章

  • AngularJS实现表单验证

    AngularJS实现表单验证

    客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。
    2015-01-01
  • AngularJS实用开发技巧(推荐)

    AngularJS实用开发技巧(推荐)

    Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。接下来通过本文给大家介绍AngularJS实用开发技巧的相关资料,需要的朋友可以参考下
    2016-07-07
  • 详解ionic本地相册、拍照、裁剪、上传（单图完全版）

    详解ionic本地相册、拍照、裁剪、上传（单图完全版）

    本篇文章主要介绍了ionic本地相册、拍照、裁剪、上传（单图完全版），非常具有实用价值，需要的朋友可以参考下
    2017-10-10
  • 在JavaScript的AngularJS库中进行单元测试的方法

    在JavaScript的AngularJS库中进行单元测试的方法

    这篇文章主要介绍了在JavaScript的AngularJS库中进行单元测试的方法,主要针对AngularJS中的控制器相关,需要的朋友可以参考下
    2015-06-06
  • 简述AngularJS相关的一些编程思想

    简述AngularJS相关的一些编程思想

    这篇文章主要介绍了AngularJS相关的一些编程思想,AngularJS是一款热门的JavaScript库,推荐!需要的朋友可以参考下
    2015-06-06
  • Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    这篇文章主要介绍了Angularjs bootstrap table多选（全选）支持单击行选中实现编辑、删除功能,需要的朋友可以参考下
    2017-03-03
  • 深究AngularJS中ng-drag、ng-drop的用法

    深究AngularJS中ng-drag、ng-drop的用法

    本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS的内置过滤器详解

    AngularJS的内置过滤器详解

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。
    2015-05-05
  • AngularJS自定义服务与fliter的混合使用

    AngularJS自定义服务与fliter的混合使用

    这篇文章主要介绍了AngularJS自定义服务与fliter的混合使用的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • 基于AngularJS的拖拽文件上传的实例代码

    基于AngularJS的拖拽文件上传的实例代码

    本篇文章主要介绍了基于AngularJS的拖拽上传的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论