调用AJAX onkeyup事件触发器。使用计时器和中止来提高性能?

时间:2012-12-16 14:50:47

标签: javascript jquery ajax

我对AJAX和javascript相对较新,我使用ajax使用onkeyup事件生成搜索建议。我试图使用计时器来规范ajax请求的数量,并使用中止函数来提高性能。我之前从未使用过这两个函数,我不确定它们是否设置正确。我想知道是否有人可以看看,如果我在这些功能的正确轨道上让我知道?非常感谢提前。

            var ajaxReq = null;  
        $(".prod-name-input").keyup(function(){
            searchword = $(this).val();
            //alert(searchword);
            if((searchword.length) > 3) {
                clearTimeout(timer);
                timer = setTimeout(function(){
                    if (ajaxReq != null) ajaxReq.abort();
                    var ajaxReq =  $.ajax({
                                        url: "invoice-get-data.php?searchword=" + searchword,
                                        dataType: "html",
                                        success: function(data){
                                           $(".smart-suggestions").html(data);
                                        }
                                    });
                }, 350);
            }
        });

1 个答案:

答案 0 :(得分:5)

我建议你看一下Ben Alman关于限制/去抖的优秀文章:http://benalman.com/projects/jquery-throttle-debounce-plugin/

你想要实现的是去抖动,所以使用Ben Alman的插件,你可以使用:

var ajaxReq = null;  

$(".prod-name-input").keyup($.debounce(350, function(){
    searchword = $(this).val();

    if((searchword.length) > 3) {
        if (ajaxReq != null) ajaxReq.abort();
        ajaxReq =  $.ajax({
            url: "invoice-get-data.php?searchword=" + searchword,
            dataType: "html",
            success: function(data){
                $(".smart-suggestions").html(data);
             }
        });
    }
}));

编辑:

事实上,在你的案件中,这是一次贬值而不是限制。

我添加了一个jsfiddle:http://jsfiddle.net/scaillerie/2AFp3/