angularjs，前端 keyup 事件触发请求太频繁，控制在规定时间内去请求

背景

前端的组件是anjularjs，属性值是可以自动绑定的。前端的输入框页面如下，根据键盘输入的值去过滤出对应的数据，并展示出来。

问题

现在存在一个问题，正常的速度输入情况下，通过keyup发起的后端请求不会很频繁，会正常返回数据。但是，在输入速度比较快的情况下，发起的请求过于频繁，因为是异步处理的数据，导致处理数据后返回到前端的数据不能够正确匹配到输入的过滤值，看起来过滤失败。结果类似于这样：

解决

现在需要解决的问题就是，在快速的按下键盘按键就会发起请求，可以通过控制在500ms内没有发生数据的改变再发起请求，也就是在500ms内没有快速的按下其他的键。

可以通过设置一个循环的定时器来实现：先记录下之前的数据，然后判断现有的数据和之前的数据在500ms内是不是有数据的改动，没有则触发真正的请求，有则不触发，继续等待。

let modalIntervals = [];
$scope.watchModalChange = function (searchPut) {
    const prevModal = _.clone($scope.modal);
    // 如果500ms内没有改变 $scope.modal，则执行搜索
    let num = setInterval(function () {
        if (_.isEqual(prevModal, $scope.modal)) {
        // 真正的请求
            $scope.getClientForModal(searchPut);
            for (let i = 0; i < modalIntervals.length; i++) {
                clearInterval(modalIntervals[i]);
            }
        }
    }, 500);
    modalIntervals.push(num);
};

在页面ne-keyup中调用这个函数，替代之前的直接调用 getClientForModal()。

最后的效果

在快速输入一些值之后，正确的返回了过滤的数据，也没有发起过多的请求。

只有这个是过滤的值的请求

到此就解决了这个问题！