Question

我有以下输入字段代码片段，我按以下方式调用AngularJS $scope方法

<input class="search-txt-input"
       id="partner_name"
       name="partner_name"
       title="Partner Name"
       type="text"
       autocomplete="off"
       ng-model="selectedPartner"
       typeahead="partner as partner.name for partner in retrievePartnerList($viewValue)"
       typeahead-items="2"
       typeahead-min-length="3">

因此，当我在文本字段中输入至少3个字符时，它将激活对retrievePartnerList函数的AJAX调用。

此外，我的服务器响应非常慢，因此对于10个字符，7个Ajax调用进入队列，一段时间后我得到一个TimeOutError。

所以为了解决这个问题，我试图找到一种方法，使用它可以延迟调用retrievePartnerList()方法，这样就可以减少发送的AJAX调用，这可能会减轻我服务器的负担。

所以我不确定如何在这里使用setTimeout()功能。

如果你们中的任何一个人对此有任何想法，请告诉我。

Answer 1

是的，您可以通过指定typeahead-wait-ms属性轻松延迟触发匹配。正如属性的名称所暗示的那样，它接受一个以毫秒为单位的值，并将延迟匹配，等待用户在向服务器发送请求之前停止键入后指定的毫秒数。

以下是演示此动作的演示：http://plnkr.co/edit/fHLqDx?p=preview

Answer 2

检查AngularStrap解决方案：https://github.com/mgcrea/angular-strap/blob/master/src/directives/typeahead.js

OR

可以在javascript中轻松完成：

var autocomplete = $('#searchinput').typeahead().on('keyup', delayRequest);

function dataRequest() {
    // api request here
}

function delayRequest(event) {
    if(delayRequest.timeout) {
        clearTimeout(delayRequest.timeout);
    }

    var target = this;

    delayRequest.timeout = setTimeout(function() {
        dataRequest.call(target, event);
    }, 200); // 200ms delay
}

AngularJS / Typeahead - 延迟调用$ scope方法

2 个答案: