23

我正在为网站开发自动搜索功能。

它使用 ajax 来查询 api。

在输入 3 个字符后，它会在每次按键时搜索。

我想要的是

Case1：
用户输入 tes
2 秒通过搜索执行

Case2:
用户输入 tes
1 秒 pass
用户按 t
2 秒 pass
搜索在 test 上执行
案例 3 ：
用户输入 tes
1 秒通过
用户按下 t
1.5 秒通过
用户按下 i
1.5 秒通过
用户按下 n
1.5 秒通过
用户按下 g
2 秒通过
search in 在测试中执行

如您所见，仅在按键后的两秒钟内没有按键（或粘贴等）时才执行搜索操作。

我的基本想法是。

on keydown 调用一个设置超时的函数，该函数还设置一个包含文本框中最后一个条目的变量。当超时到期时，它会检查框中的值以查看它是否与变量中的值匹配。

如果它们匹配，则没有变化。所以做搜索

如果他们不做任何事情，因为随后按键的超时将跟随做同样的检查。

这是唯一/最好的方法吗？

4

2 回答 2

51

The following function from Remy Sharp will do the trick:

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 500);
    };
}

In the preceding code, f is the function you would like to throttle and delay is the number of milliseconds to wait after the last call (defaults to 500 if omitted). throttle returns a wrapper function that clears any existing timeouts from previous calls and then sets a timeout for delay milliseconds in the future to call f. A reference to the arguments of the returned function is used to call f with, ensuring f receives the arguments it is expecting.

You should use it as follows:

$('#search').keyup(throttle(function(){
    // do the search if criteria is met
}));
于 2010-12-06T13:51:14.563 回答
13

几乎相同，只是仅在满足条件时才设置计时器：

<input id="search" type="text" />
<script>
    var timer, value;
    $('#search').bind('keyup', function() {
        clearTimeout(timer);
        var str = $(this).val();
        if (str.length > 2 && value != str) {
            timer = setTimeout(function() {
                value = str;
                console.log('Perform search for: ', value);
            }, 2000);
        }
    });
</script>
于 2010-12-06T13:39:15.343 回答