Question

我正在使用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>

角度表达

    var app = angular.module('pReport', []);

    app.controller('ReportCtrl', function ($scope, $http, $timeout) {

        var timer = false;
        $scope.batches = [];
        $scope.reports = [];
        $scope.$watch('searchString', function () {

            if (timer) {
                $timeout.cancel(timer);
            }
            timer = $timeout(function () {

                $http({ }). //POSTING DETAILS
                success(function (data, status, headers, config) {}); //SEARCH RESULTS
            }, 1000)
        });
        $scope.selectBatch = function (batchNumber) { } // SEARCH FURTHER
    });

这种延迟方法有什么不对吗？
我应该使用指令吗？
还有其他最有效的方法吗？

提前感谢您的帮助！

Answer 1

您要找的是debounce。 Lodash提供开箱即用的此功能。好消息是Angular正在即将推出的版本built-in中获得此功能。

它会阻止每个给定时间段执行一次以上的功能。这对于像一个预先搜索框这样的情况非常理想，在这种情况下，您希望在向服务器发送另一个请求和一般事件处理之前等待。

在这种情况下，我会删除手表并将$http调用移动到自己的功能中去包装：•

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

leading和trailing只是配置去抖动的时间，在我们的例子中，我们希望它在最初的1000次等待之后发生。

然后将输入框更改为使用ng-change，以便在用户输入内容时触发该功能，但每1000ms只触发一次：

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

使用Angular进行延迟搜索

1 个答案: