1

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

1 回答 1

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

于 2012-12-16T15:25:51.460 回答