热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这篇文章给大家介绍了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);

总结

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


推荐阅读
  • 本文详细解析了计算机设备的型号命名规则,并提供了各品牌的相关资料。具体包括设备名称、品牌、型号、规格配置、生产厂商、数量、单价及金额等信息。例如,直播机房的安装与集成涉及9套设备,总控系统的安装与架构为1套,文艺录音棚的安装与集成则需详见附录中的技术参数。 ... [详细]
  • 机顶盒,即数字电视机顶盒(Digital TV Set-Top Box,简称STB),是一种放置在电视机旁的设备。它主要用于将数字信号转换为电视能够识别的模拟信号,从而实现高质量的视频和音频播放。机顶盒不仅支持基本的电视节目接收功能,还具备多种增值服务,如互动点播、网络浏览等。随着技术的发展,现代机顶盒集成了更多的智能功能,成为家庭娱乐的重要组成部分。 ... [详细]
  • 分布式开源任务调度框架 TBSchedule 深度解析与应用实践
    本文深入解析了分布式开源任务调度框架 TBSchedule 的核心原理与应用场景,并通过实际案例详细介绍了其部署与使用方法。首先,从源码下载开始,详细阐述了 TBSchedule 的安装步骤和配置要点。接着,探讨了该框架在大规模分布式环境中的性能优化策略,以及如何通过灵活的任务调度机制提升系统效率。最后,结合具体实例,展示了 TBSchedule 在实际项目中的应用效果,为开发者提供了宝贵的实践经验。 ... [详细]
  • 如何在 PostgreSQL 中查询表创建语句:PostgreSQL 操作指南
    首先,启动 pgAdmin 并连接到目标数据库服务器。接着,在左侧导航栏中展开“架构”节点,找到并选择需要查询的表。最后,切换到“SQL”标签页,即可查看该表的创建语句。此外,你还可以通过执行 `SELECT pg_get_ddl_command('表名'::regclass);` 命令来直接获取表的 DDL 语句。 ... [详细]
  • C#微信开发入门教程第二篇:新手快速上手指南,含详细视频讲解
    在距离上次课程一个多星期后,我们终于带来了第二讲的内容。虽然原计划是一周一次更新,但由于工作繁忙有所延迟。近期在交流群中发现,一些初学者已经能够熟练调用微信接口,但对微信公众平台的消息接收处理机制还不够了解。因此,本次课程将详细介绍如何高效处理微信公众平台的消息接收,并提供详细的视频讲解,帮助大家快速上手。 ... [详细]
  • 在Python编程中,探讨了并发与并行的概念及其区别。并发指的是系统同时处理多个任务的能力,而并行则指在同一时间点上并行执行多个任务。文章详细解析了阻塞与非阻塞操作、同步与异步编程模型,以及IO多路复用技术的应用。通过模拟socket发送HTTP请求的过程,展示了如何创建连接、发送数据和接收响应,并强调了默认情况下socket的阻塞特性。此外,还介绍了如何利用这些技术优化网络通信性能和提高程序效率。 ... [详细]
  • ASP11:深入解析与应用展望本文详细探讨了 ASP11 中的 `AppRelativeTemplateSourceDirectory` 属性,该属性用于获取或设置包含控件的 Page 或 UserControl 对象的应用程序相对虚拟目录。此外,文章还介绍了 1.0 版本中的 Binding 机制,分析了其在实际开发中的应用和优化方法,为开发者提供了全面的技术指导。 ... [详细]
  • 在Mac平台上通过终端操作完成MySQL的启动与彻底关闭——八步指南
    在Mac平台上,通过终端操作实现MySQL的启动与完全关闭,本文提供了一套详细的八步指南。首先,在Finder中使用快捷键进入 `/usr/local` 目录,找到并进入 `mysql` 文件夹。接着,右键选择该文件夹并从上下文菜单中打开终端。在终端中,输入并执行 `./scripts/mysql_install` 命令以开始安装或初始化过程。后续步骤将指导用户如何顺利启动和安全关闭MySQL服务,确保系统资源的有效管理。 ... [详细]
  • 江民科技在2月23日的病毒播报中提醒用户注意,今日检测到的病毒包括“网游窃贼”变种nln(TrojanPSW.OnLineGames.nln)和“Hosts劫持者”rj(TrojanQhost.rj)。这些恶意软件可能导致正常网页访问受限,并增加游戏账号被盗的风险。建议用户及时更新防病毒软件,加强系统安全防护,避免个人信息泄露。 ... [详细]
  • 深入解析 Redis 源码阅读方法与技巧
    在深入解析 Redis 源码的过程中,建议首先从数据结构的实现入手。这是因为在 Redis 的整体架构中,数据结构相关的代码与其他模块的耦合度较低,有助于初学者快速理解和掌握核心概念。通过阅读这些基础文件,可以为后续深入研究打下坚实的基础。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • 本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ... [详细]
  • D2iQ与Rafay联手打造统一的应用与基础设施管理解决方案
    D2iQ与Rafay合作推出了一种全面的应用和基础设施管理解决方案。本文深入探讨了双方如何通过集成技术实现统一管理,为面临类似挑战的企业提供详细的分析和实用建议,助力其高效管理和优化资源。 ... [详细]
  • Spring Boot 和 Spring Cloud 是 Spring 生态系统中的重要组成部分,各自具有独特的特性和应用场景。Spring Boot 通过简化配置和自动配置机制,显著提高了开发和部署效率,减少了传统 Spring 应用中繁琐的 XML 配置文件需求。而 Spring Cloud 则在此基础上进一步提供了分布式系统的解决方案,包括服务发现、配置管理、断路器等高级功能,适用于微服务架构的构建和管理。本文将深入探讨两者的核心差异,并分析其各自的最佳应用场景。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
author-avatar
手机用户2602916275
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有