AngularJS:带去抖功能的 $watch

2024-04-06

我有以下代表搜索字段的 html:

<input ng-model-options="{ debounce: 500 }" type="text" ng-model="name">

以及以下js:

$scope.$watch('name', function(newVal, oldVal) {
            if(newVal != oldVal) {
                $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
            }
        });

现在,我的 pageChanged 函数对我的服务器进行 REST 调用,并根据排序和搜索信息(“名称”)返回实体列表。假设我的用户想要搜索“Tom”。我想避免我的应用程序进行三个休息调用(name =“T”,name =“To”,name =“Tom”)。

我尝试使用去抖来做到这一点,但似乎手表不能与去抖一起使用,所以我想知道用最少的代码实现此功能的最佳方法是什么?


您应该使用 ng-change 来完成此类事情,而不是连接手表。

<input ng-model-options="{ debounce: 500 }" type="text" ng-model="name" ng-change="modelChanged()">

JS:

var timeout = $timeout(function(){});

$scope.modelChanged = function(){
    $timeout.cancel(timeout); //cancel the last timeout
    timeout = $timeout(function(){
        $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
    }, 500);
};

我不熟悉去抖,但它可能会达到同样的效果。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:带去抖功能的 $watch 的相关文章

  • 如何按日期属性对对象数组进行排序?

    假设我有一个由几个对象组成的数组 var array id 1 date Mar 12 2012 10 00 00 AM id 2 date Mar 8 2012 08 00 00 AM 如何按日期元素从最接近当前日期和时间的日期开始对该数
  • iframe 不读取 Chrome 中的 cookie

    Chrome 不允许子 iframe 读取自己的 cookie 我有一个带有子 iframe 的父网页 家长在https first site com 孩子在 父级内部 cookie set with 小路 安全 真实 仅http 假 域名
  • ios safari - getUserMedia 无法正常工作

    我真的有this https stackoverflow com q 45692526 6048715问题 但 OP 的解决方案对我不起作用 重申一下 我正在使用navigator mediaDevices getUserMedia 在浏览
  • Google Analytics 是否具有针对长时间运行的网络应用程序的“心跳”功能?

    我正在制作一个专注于观看嵌入内容的网络应用程序 我希望应用程序客户端向 GA Google Analytics 发送 心跳 类型的信号以保持会话继续进行 现在看来 如果访问者观看视频 5 10 分钟 GA 就会假设他已经离开页面 并将用户的
  • 使用 html2canvas 将 highcharts 图表渲染为 pdf 在 IE 和 Firefox 上不起作用

    我们使用 html2canvas js 和 html2canvas svg js 版本 0 5 0 beta1 以及 highcharts js 将圆环图下载为 pdf 这在 Chrome 中按预期工作 但在 IE 和 Firefox 中不
  • 如何防止脚本注入攻击

    Intro 这个话题一直是 StackOverflow 以及许多其他技术论坛上许多问题和答案的祸根 然而 其中大多数都是特定于具体条件的 甚至更糟 通过脚本注入预防中的 整体 安全性dev tools console or dev tool
  • 单击按钮时执行 python 脚本

    我有一个带有一个按钮的 HTML 页面 当我们单击该按钮时 我需要执行一个 python 脚本 并返回到包含结果的同一 HTML 页面 所以我需要对返回值进行一些验证并执行一些操作 这是我的代码 HTML
  • 使用 ChartJS v2.0 自定义图例

    我正在尝试在 ChartJS v2 0 中创建自定义图例模板 在 ChartJS v1 中 我只是向新的 Chart 构造函数添加了一个属性 例如 legendTemplate ul li span style background col
  • 在 Three.js 中使用多种材质来合并几何体

    我想使用 2 个网格创建一棵松树 其中 1 个用于树干 另一个用于灌木 这就是我所做的 var pine geometry new THREE Geometry var pine texture 1 THREE ImageUtils loa
  • 弹出窗口显示来自 php 和 javascript 的结果

    我正在尝试实现 javascript 来显示 php 的结果 基本上 我有一个登录页面 对于登录失败 我希望结果显示在弹出窗口中 而不是仅仅用 php 回显它们 我尝试实现警报框 但看起来我错过了一些东西 成功登录将被重定向到logged
  • canvas:如何在一个变换语句中完成平移、倾斜、旋转...?

    最近几天我在学习 变换 现在我知道如何通过变换的矩阵进行平移 旋转 倾斜 缩放 但如果我想在一个转换语句中执行上述所有操作 我该怎么办 ctx transform a b c d e f 当我们想要通过变换旋转某些东西时 我们必须为每个参数
  • Chrome 的萤火虫

    谁能推荐一个类似于 Firebug 的不错的 Google Chrome 扩展程序 我确实看到这里有几个类似的问题 但答案似乎非常过时 Thanks It s built in Press Ctrl Shift I Or Tools gt
  • window.onclose 函数

    我使用这个函数来调用我的窗口关闭 这是确认框弹出窗口 if confirm Sure you want to close the window yes return to submit function else no return to
  • 在 WordPress 页面上嵌入 swf

    我正在尝试将 swf 嵌入到 WordPress 页面中 这听起来很简单 但它不起作用 我不明白为什么 我已将所有相关文件上传到服务器上 并且我相当确定所有文件路径都是正确的 包含 fla 和 swf 文件的文件夹还包含一个 index h
  • 找到两个移动物体的更好交点

    我想极大地优化我的算法之一 我将尽力以最好的方式解释它 主题 我们当时处于二维欧几里德系统中t 0 在这个系统中有两个对象 O1 and O2 O1 and O2分别位于点PA and PC O1移动于常数和已知点方向的速度PB 当物体到达
  • 检测 Service Worker 离线状态的最佳实践

    我有一个服务工作者应该缓存一个offline html客户端没有网络连接时显示的页面 然而 有时它会认为导航器已离线 即使它并未离线 那是 navigator onLine false 这意味着用户可能会得到offline html而不是实
  • 在 JavaScript 中添加事件的最佳方式是什么?

    我发现在 JavaScript 中设置事件有两种主要方法 直接在标签内添加一个事件 如下所示 a href do foo a 通过 JavaScript 设置它们 如下所示 a href do bar a 并在 a 中添加一个事件
  • 从 BLOB 打印 PDF

    我从外部 API 获取 PDF 文件 使用此代码我可以正确下载该文件 var req new XMLHttpRequest req open POST url true req responseType blob req setReques
  • 重写 AngularJs DatePicker 弹出窗口以添加新标题

    这个问题说明了一切 我已经搜寻过高低 但没有找到办法 但是 在我破解模板之前 我想我会在这里问 只是为了说清楚 我希望能够在日期选择器的顶部添加一些文本 这是一个弹出窗口 如果这有什么区别的话 例如 你的生日是什么时候 如果您遵循本主题 有
  • 将 csv 解析输出保存到变量

    我是使用 csv parse 的新手 项目 github 中的这个示例满足了我的需要 但有一个例外 我不想通过 console log 输出 而是想将数据存储在变量中 我尝试将 fs 行分配给变量然后返回data而不是记录它 但这只是返回了

随机推荐