Question

我有一个脚本可以在我的网站上搜索重复内容，因为用户正在输入新帖子的标题（就像在Quora上一样）。现在它会在keyup上发出一个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

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

仅在一段时间内没有按任何键后发送请求，比如说.5秒。这样，如果一个人快速打字，你不发送10个请求，你只需在他们停止输入时发送一个请求。这可以通过setTimeout和clearTimeout。
发送新请求时，取消之前的请求。这种方式只有一个活动请求。无论如何，你真的只关心最新的。这可以使用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(...);
}

Answer 2

我会频繁地限制keyup事件。您可以使用此throttle plugin

这里的示例会将事件限制为以250毫秒的延迟触发，因此每250秒只有一个按键而不是每个按键：

 $("#topic_title").keyup($.throttle(250, 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);
         }
      });
 });

Answer 3

请参阅Abort Ajax requests using jQuery。

var xhr = null;

$("#topic_title").keyup(function()
{
    var search_val=$(this).val();

    if(xhr != null)
        xhr.abort();

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

Answer 4

一种简单的方法是使用计时器并调用帖子并清除计时器（如果它是堆叠的）。见下文，

$(function () { 
  var timer = null;//in scope
  $("#topic_title").keyup(function(){
    var search_val=$(this).val();

    if (timer != null) {
       clearTimeout(timer);
    }

    timer = setTimeout(function () {
       $.post('/?post_type=topic&duplicate=1',{s:search_val},function(data){
          if(data.length>0){
            var results = $(data).find( '#results' );
            $("#duplicates").html(results);
          }      
       });
     }, 1000); //The timer is 1 second, update timer as your need.
  });
});

Answer 5

查看这个jQuery插件。 throttle-debounce.js

如何避免堆叠jquery post（）

5 个答案: