Question

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

Answer 1

我建议你看一下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/。

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

1 个答案: