如何避免堆疊jquery post（）

Question

我有一個腳本，當用戶在新帖子的標題中輸入內容時（與Quora類似），我的網站搜索重複內容。現在它在關鍵幀中觸發了一個發佈請求，導致發佈請求堆疊。

任何想法避免這種最好的方法？

$("#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(...); 
} 

Answer 2

看看這個jQuery插件。 throttle-debounce.js

Answer 3

我會扼殺keyup事件，每隔一段時間發生一次。 你可以在這裏使用這個throttle plugin

例子就是節流事件觸發爲250ms滯後所以不是每次擊鍵只有1 KEYUP每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 4

見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 5

一個簡單的方法是使用一個計時器，並調用帖子和清除計時器，如果它是堆疊的。看下面，

$(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. 
    }); 
});