http请求防抖动

Tags: 实践 js  Category: CODER
发表:

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

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

此场景的一个实例如下：

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

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

假设我们的代码如下，

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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请求。这样就达到了防御由于连续输入而造成的抖动问题。

- EOF -

All rights reserved @gejiawen.

本文链接：http://blog.gejiawen.com/2014/10/30/prevent-http-jitter/