Question

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

它使用ajax来查询api。

在输入3个字符后的那一刻，它将在每次按键时搜索。

我想要的是

案例1：
  用户输入测试
  2秒过去了   搜索执行
<小时/>   案例2：
  用户输入测试
  1秒通过
  用户按下t
  2秒钟通过   搜索是在测试上进行的
  案例3：
  用户输入测试
  1秒钟通过
  用户按下t
  1.5秒通过
  用户按下i   1.5秒通过
  用户按下n
  1.5秒通过
  用户按g
  2秒钟通过   在测试中进行搜索

所以你可以看到，搜索操作仅在按键后两秒内没有按键（或粘贴等）时执行。

我的基本想法是。

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

如果匹配则没有变化。搜索也是如此

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

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

Answer 1

Remy Sharp的以下功能可以解决问题：

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);
    };
}

在前面的代码中，f是您想要限制的函数，delay是上次调用后等待的毫秒数（如果省略则默认为500）。 throttle返回一个包装函数，该函数清除先前调用的任何现有超时，然后设置将来delay毫秒的超时以调用f。对返回函数的arguments的引用用于调用f，确保f接收到它期望的参数。

您应该按如下方式使用它：

$('#search').keyup(throttle(function(){
    // do the search if criteria is met
}));

Answer 2

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

<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>

Jquery在最后一次按键后2秒运行代码

2 个答案: