【问题标题】:Ways to throttle ajax requests限制ajax请求的方法
【发布时间】:2011-10-21 12:28:31
【问题描述】:

我正在使用以下代码 (written by another user) 来限制 livesearch 函数中的 ajax 请求:

如果你喜欢演示,JSFiddle:http://jsfiddle.net/4xLVp/

不过,它似乎有问题。使用Ctrl+shift+back-arrow 清除值,然后再次键入会导致一连串请求。空白值也会导致请求。看起来不太对劲,尤其是与 jQuery UI autocomplete 相比,后者的请求延迟似乎更加可衡量。

    $('##tag-search').keyup(function() {
        var elem = $(this);
        if (elem.val().length >= 2) {
            elem.data('search',search).clearQueue().stop().delay(1000).queue(function() {
                $.ajax({ // ajax stuff
                    'success': function(data){ /*show result*/ }
                });
                if (elem.data('search') !=  string) return;
            });                                             
        } else if (string.length <= 1) { /*show original content*/ }
    });

有没有更好的方法来处理这个问题?

【问题讨论】:

    标签: jquery delay throttling


    【解决方案1】:

    我只会使用setTimeout:

    (function() {
        var timeout;
        $('#tag-search').keyup( function() {
            var elem = $(this);
            if (elem.val().length >= 2) {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                   $.ajax({ // ajax stuff
                        'success': function(data){ /*show result*/ }
                    });     
                }, 80); // <-- choose some sensible value here                                      
            } else if (string.length <= 1) { /*show original content*/ }
        });
    }());
    

    还有一个debounce/throttle 插件。

    【讨论】:

    • 谢谢。成功了,我很惊讶它这么简单。您能否解释一下 clearTimeout() 的作用以及为什么需要它?
    • setTimeout - 设置将在一段时间后执行的代码,clearTimeout - 删除待执行的,需要在开始新的之前清除早期的 peding ajax 请求
    • 顺便说一句 - 我不建议删除 if (elem.data('search') != string) return; 部分,它会阻止早期的 ajax 调用(持续更长时间)更新已经更改的结果
    • @Jacek_FH:怎么样?据我所知,这个声明什么也没做。它不在 Ajax 调用中。无论如何,该函数将在该语句之后返回。 编辑:啊,在原始代码(OP 链接到的那个)中,此语句位于 Ajax 回调中。
    猜你喜欢
    • 1970-01-01
    • 2011-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-22
    • 1970-01-01
    • 2019-09-05
    相关资源
    最近更新 更多