http请求防抖动

Category:
发表:

假设我们正处在这样的一个场景:

程序将会根据我们的输入,实时的发送http请求,向后端请求数据。

此场景的一个实例如下:

有一个搜索框,我们在搜索框中输入一些关键字,程序将会实时的给出相关关键字的搜索结果。即所谓的即时搜索功能。

这里,可能会出现一个问题。当我们在输入框中连续的输入关键字时,每输入一个字符就会向后端发送一个http请求,这样就会导致结果抖动的效果。

假设我们的代码如下,

<input type="text" ng-keyup="getResult()">

这里采用AngularJS的语法,为input标签绑定了一个键盘事件回调getResult,其内容如下:

// more code

var ticket;
$scope.getResult = function() {
    if (ticket) {
        $timeout.cancel(ticket);
    }

    ticket = $timeout(function() {
        $http.get('/url')
        .success(function(data) {
            // do something
        })
        .error(function(data) {
            // do something
        });
    }, 350);
};

// more code

从代码中可以看出,每次触发键盘的按键弹起事件(即完成一次键盘输入)时,我们就会触发getResult回调。而在回调的内容中,我们采用$timeout服务来达到延时发出http请求的目的。如果在延时的过程中(延时尚未结束),再次触发了getResult回调,那么if语句的判断将会取消上次的延时,即取消了之前的http请求。这样就达到了防御由于连续输入而造成的抖动问题。