Javascript 使用角度搜索的延迟搜索

我正在使用Angular为我的一个项目使用搜索控件。我正在尝试延迟响应，比如搜索框应该等到2秒后再调用相关函数

当我在网上搜索时，大多数建议是使用指令。我无法使用指令，因为依次单击搜索结果会显示另一组结果。在网上思考后，我得到了另一个解决方案

我的代码：

<div ng-controller="ReportCtrl" ng-app="pReport">
    <input type="text" ng-model="searchString"  placeholder="Search"/>
    <div ng-show="display == 'search'">
        <ul>
            <li ng-repeat="i in batches">
                <a ng-click='selectBatch(i.batchnumber)'>{{i.batchnumber}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="display == 'repdetail'">
        <ul>
            <li ng-repeat="i in reports">
                <a href='{{i.filename}}'>{{i.screenname}}</a>
            </li>
        </ul>
    </div>
</div>

这种拖延的做法有什么不对吗

我应该使用指令吗

还有其他最有效的方法吗

---

提前感谢您的帮助

你要找的是一个

debounce

。提供这种开箱即用的功能。好消息是Angular正在即将发布的版本中获得此功能

它会阻止函数在每个给定时间段执行一次以上。这非常适合于在向服务器发出另一个请求之前等待键入前搜索框和一般事件处理的情况

在这种情况下，我会移除手表，并将

$http

调用移动到它自己的函数中，该函数包装在一个去盎司中：

$scope.search = function() {
    _.debounce($http(...), 1000, { leading: false, trailing: true })
}

前导的

和

尾随的

只是配置何时会发生去盎司，在我们的例子中，我们希望它在最初的1000次等待之后发生

然后将输入框更改为使用

ng change

，以便在用户键入内容时触发该功能，但仅每1000毫秒触发一次：

<input type="text" ng-model="searchString"  placeholder="Search" ng-change="search()"/>

---

更好的方法是使用指令。因为您对这种方法不感兴趣，所以这很好。这种方法没有错。

<input type="text" ng-model="searchString"  placeholder="Search" ng-change="search()"/>