在多个 keydown 事件后一秒执行 AJAX 搜索答案

【问题标题】：Perform AJAX search one second after multiple keydown events在多个 keydown 事件后一秒执行 AJAX 搜索
【发布时间】：2012-12-02 02:10:34
【问题描述】：

所以我正在用 jquery 制作一个 autocomplete。 Ajax 用于从远程位置获取重型 xml 文件。如果我搜索前。 “好汉好汉”它使用 ajax 进行大约 16 个查询（对于除了第 3 个输入的每个字母，请查看代码）。

我希望它在用户按下最后一个键后一秒钟发出 Ajax 请求，这样它将执行一个查询而不是 16 个。

因此，如果用户在上次 keydown 事件后 1 秒内按下另一个键，则它不会执行查询。

<script>
    $(document).ready(function(){
        $('#tv_search').keydown(function(){
            var search = $(this).val();
            if(search.length >= 3)
            {
                $.ajax({
                  type: "GET",
                  url: "search.php",
                  data: {show : search, key : '890k4900k0ll' }
                }).done(function(msg){
                    $('#t').html(msg);
                });
            }
        });
    });
</script>

Search for series: <input type='text' name='tv_search' id='tv_search'>

有什么想法吗？

【问题讨论】：

你为什么要搜索两个半男人？

标签： jquery ajax autocomplete

【解决方案1】：

您可以只使用超时，并在每次按下键时清除它：

$(document).ready(function() {
    $('#tv_search').on('keyup', function() {
        clearTimeout($(this).data('timer'));
        var search = this.value;
        if (search.length >= 3) {
            $(this).data('timer', setTimeout(function() {
                $.ajax({
                    type: "GET",
                    url: "search.php",
                    data: {
                        show: search,
                        key: '890k4900k0ll'
                    }
                }).done(function(msg) {
                    $('#t').html(msg);
                });
            }, 1000));
        }
    });
});

【讨论】：

谢谢！完美地工作！ Bobthyasian，它对我有用。
应该可以正常工作，只要有一个 search.php 文件并且 DOM 中存在正确的元素等。优点是它不需要全局变量。
查看这个delay_method，它允许您为执行队列提供标签stackoverflow.com/a/30503848/1834212
请告诉我key: '890k4900k0ll' 应该是什么？我觉得这个show: search 就够了。
@stack - 来自上面的问题，它是 OP 发送的数据，我只是复制了它，并且无法真正判断 OP 是否可以遗漏密钥？

【解决方案2】：

为避免在每次按键时生成多个 AJAX 请求，请尝试使用 setTimeout() 和 clearTimeout() 方法，取消上次超时并在清除后调用 setTimeout() 开始新的超时。 setTimeout() 方法应包含 AJAX 请求，该请求在用户按下键的四分之一秒（250 毫秒）后执行。

如果请求可用，我也会 abort() 请求。

var timeOut = null,
    myXHR = null;
$(document).ready(function(){
    $('#tv_search').keydown(function(){
        // It will clear the setTimeOut activity if valid.
        if(timeOut) clearTimeout(timeOut);

        var search = $(this).val();
        if(search.length >= 3)
        {
            timeOut = setTimeout(function(){
              // Cancel the last request if valid
              if(myXHR) myXHR.abort();

              myXHR = $.ajax({
                type: "GET",
                url: "search.php",
                data: {show : search, key : '890k4900k0ll' }
              }).done(function(msg){
                  $('#t').html(msg);
              });
            }, 250);// wait for quarter second.
        }
    });
});

【讨论】：

【解决方案3】：

我有一个解决方案，可以让您延迟调用的任何方法，避免重复调用，根本不会使用！

https://stackoverflow.com/a/30503848/1834212

【讨论】：

【解决方案4】：

退出简单的解决方案：

<script>
$(document).ready(function(){
var mytimer;
    $('#tv_search').keydown(function(){
       clearTimeout(mytimer);
        var search = $(this).val();
        if(search.length >= 3)
        {
           mytimer = setTimeout(function(){
             $.ajax({
              type: "GET",
              url: "search.php",
              data: {show : search, key : '890k4900k0ll' }
            }).done(function(msg){
                $('#t').html(msg);
            });
         }, 1000);
        }
    });
});

其中 'mytimer' 必须是全局变量，只需在每次事件调用时清除之前的 'mytimer'。它只会以 1 秒的间隔执行最新的调用。

【讨论】：