How to avoid stacking of jquery post()

Question

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.

score 2 · Accepted Answer · answered Apr 23 '12 at 20:05

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

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

score 1 · Answer 2 · answered Apr 23 '12 at 20:02

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

score 1 · Answer 3 · edited May 23 '17 at 12:03

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

score 1 · Answer 4 · answered Apr 23 '12 at 20:09

1

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

answered Apr 23 '12 at 20:09

Selvakumar Arumugam

79,297
15
120
134

You can place `timer` inside of your ready function to avoid global variables. – James Montagne Apr 23 '12 at 20:10
@JamesMontagne isn't `clearTimeout` is executed in global scope? – Selvakumar Arumugam Apr 23 '12 at 20:11
Your call to `clearTimeout` will pass the value of the variable as a parameter. As long as your call has access to the variable then you're good. – James Montagne Apr 23 '12 at 20:13
@JamesMontagne so dumb of me.. was thinking about something else and wrote it that way.. Thanks – Selvakumar Arumugam Apr 23 '12 at 20:14

score 0 · Answer 5 · answered Apr 23 '12 at 20:01

0

Check out this jQuery plugin. throttle-debounce.js

answered Apr 23 '12 at 20:01

bvulaj

5,023
5
31
45

How to avoid stacking of jquery post()

5 Answers5