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);
总结
以上就是这篇文章的全部内容，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
-
问题内容： 我不知道如何使用和。官方文档没有帮助。 我不明白的是： 他们连接到DOM吗？ 如何更新对模型的DOM更改？ 它们之间的连接点是什么？ 我尝试了本教程，但这需要对它的理解并且理所当然。 做什么和做什么，以及如何正确使用它们？ 问题答案： 您需要了解AngularJS的工作原理才能理解它。 消化周期和作用域 首先，AngularJS定义了所谓的 摘要循环 的概念。这个周期可以看作是一个循环
-
问题内容： 我已经使用AngularJS了一段时间，并且发现需要不时使用$ timeout （似乎通常是初始化jQuery插件）。 最近，我一直在尝试更好地和更深入地了解摘要周期，并且遇到$ evalAsync 函数。 似乎该函数产生与相似的结果，只是您不给它延迟。每次使用时，它的延迟都为0，所以现在我想知道是否应该使用它。 两者之间有根本区别吗？您会在哪种情况下使用另一种情况？我想更好地了解何时
-
本文向大家介绍vue.js中$watch的用法示例，包括了vue.js中$watch的用法示例的使用技巧和注意事项，需要的朋友参考一下 前言 vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，
-
问题内容： 什么时候应该使用角度函数，什么时候应该使用angularjs指令？对我来说，他们都可以做同样的事情。 两者之间是否有差异或使用方式？ 问题答案： 显然，它们并不相同。一种仅在控制器中使用；另一种仅用于控制器。另一个是对输入元素的指令。 但是即使在它们的应用中，它们也有所不同。 使用监视的表达式时，将在每个摘要循环上对其进行评估，如果有更改，则将调用处理程序。 使用，响应事件，显式调用处
-
问题内容： 我有以下代码： 我进入了Javascript控制台。我没有正确注入服务的依赖项吗？ 问题答案： 您没有注射。应该如下。 这样声明可以确保在最小化JavaScript代码时正确识别服务。有关如何帮助缩小的更多信息，请参见关于缩小和为缩小声明AngularJS模块的说明 如果您的计划中没有缩小功能（例如进行快速测试），则只需
-
问题内容： 我可以在AngularJS范围上设置$ watch，以便在我感兴趣的表达式发生更改时得到通知。但是一旦失去兴趣我该如何停止观看？ 问题答案： 当调用一个函数时，该函数将取消注册绑定的表达式。 例如，要观看变量仅更改一次： 希望能有所帮助:-)
-
问题内容： 我的AngularJS应用程序中具有监视功能。 但是，在某些情况下（在我的示例中，更改了我的单页应用程序的页面），我想停止监视（例如清除超时）。 我怎样才能做到这一点？ 问题答案： 返回注销功能。调用它将取消注册。
-
问题内容： 在我的应用程序的特定页面上，我考虑进行服务器调用以按设定的时间间隔更新信息。我偶然发现了一个问题。当用户离开相关页面时，我想取消$ timeout，以便该应用程序不再尝试处理不再存在的内容。 关于如何解决此问题的任何想法？ 问题答案： 像这样使用： 参考