1

我有一个脚本，可以在用户输入新帖子的标题时搜索我的网站以查找重复的内容（就像在 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() 方法。奇迹般有效。

4

5 回答 5

2

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

  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(...);
}
于 2012-04-23T20:05:52.813 回答
1

我会限制 keyup 事件每隔一段时间发生一次。你可以使用这个油门插件

此处的示例将限制事件以 250 毫秒的延迟触发，因此每 250 毫秒只有 1 次击键，而不是每次击键：

 $("#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);
         }
      });
 });
于 2012-04-23T20:02:01.263 回答
1

请参阅使用 jQuery 中止 Ajax 请求。

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);
        }
    });
});
于 2012-04-23T20:07:11.587 回答
1

一个简单的方法是使用计时器并调用 post 和 clear timer（如果它是堆叠的）。见下文，

$(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.
  });
});
于 2012-04-23T20:09:14.560 回答
0

看看这个 jQuery 插件。 油门去抖.js

于 2012-04-23T20:01:53.347 回答