jquery - 如何避免jquery post()的堆叠

Question

我有一个脚本，当用户输入新帖子的标题时(就像在 Quora 上一样)，它会在我的网站上搜索重复内容。现在它会在 keyup 上触发一个 post 请求，导致 post 请求堆积。

关于避免这种情况的最佳方法有什么想法吗？

$("#topic_title").keyup(function(){
    var search_val=$(this).val(); 
    $.post('/?post_type=topic&duplicate=1',{s:search_val},function(data){
        if(data.length>0){
           var results = $(data).find( '#results' );
           $("#duplicates").html(results);
        }

     });
});

** 感谢您提供的所有高质量答案!为了简单起见，我使用了 abort() 方法。奇迹般有效。

Answer 1

在这种情况下我通常会做两件事:

1. 仅在特定时间段(例如每秒 0.5 秒)内未按下任何按键后发送请求。这样，如果一个人打字速度很快，您就不会发送 10 个请求，而只需在他们停止打字时发送一个请求。这可以通过使用 setTimeout 和 clearTimeout 来完成。

2. 发送新请求时，取消先前的请求。这样一来，就只有一个事件请求。无论如何，你真的只关心最新的。这可以通过使用 abort() 来完成。

粗略的轮廓:

var timeout;
var xhr;

$("#topic_title").keyup(function(){
    if(timeout) clearTimeout(timeout);
    if(xhr) xhr.abort();

    timeout = setTimeout(function(){
        doThePost(<parameters>);
    }, 500);
});

function doThePost(){
    xhr = $.post(...);
}