CODEWITHSUNDEEP
jquerypost
jetlej
jetlej

Reputation: 3392

How to avoid stacking of jquery post()

I have a script that searches my site for duplicate content as a user is typing in the title of a new post (just like on Quora). Right now it fires off a post request on keyup, leading to stacking of post requests.

Any ideas on the best way to avoid this? 

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

     });
});

** Thanks for all of the quality answers! I went with the abort() method for simplicity. Works like a charm.

Upvotes: 1

Views: 86

Answers (5)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

A simple way is to use a timer and call the post and clear timer if it is stacked. See below,

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

Upvotes: 1

Anthony Simmon
Anthony Simmon

Reputation: 1607

See 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);
        }
    });
});

Upvotes: 1

James Montagne
James Montagne

Reputation: 78690

There are 2 things I will generally do in a situation like this:

  1. Only send off the request after no key is pressed for a certain time period, say .5 a second. This way if a person is typing quickly, you don't send off 10 requests, you just send one when they stop typing. This can be done by using setTimeout and clearTimeout.

  2. When a new request is sent, cancel the previous. This way there is only ever one active request. You really only care about the latest anyway. This can be done by using abort().

A rough outline:

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

Upvotes: 2

Gabe
Gabe

Reputation: 50503

I would throttle the keyup event to happen on every so often. You could use this throttle plugin

Example here would throttle the event to fire with a lag of 250ms so instead of every key stroke only 1 keyup every 250ms:

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

Upvotes: 1

bvulaj
bvulaj

Reputation: 5123

Check out this jQuery plugin. throttle-debounce.js

Upvotes: 0

Related Questions