How to make this jquery function more efficient?

Question

I have a checkout I'm playing with which has some up and down arrows next to the quantity input of each item.

I have some repeated code and it doesn't seem that efficient. Hopefully you can help.

Each item looks something like this (please excuse my non-standard-conforming item_id attribute for now)

<div class="qty_ctrl_wrap">
  <input class="bag_qty" type="text" value="4" item_id="532" name="product_quantity">
  <div class="arrows">
    <div class="more"></div>
    <div class="less"></div>
  </div>
</div>

Here's the full jquery function:

$('#checkout .arrows div').live('click',function(){

    var item_id = $(this).parent().prev('input').attr('item_id');
    var current_qty = $(this).parent().prev('input').val();

    if($(this).attr('class') == 'more') {

        var new_qty = parseInt(current_qty) + 1;

    } else {

        var new_qty = parseInt(current_qty) - 1;

    }

    // change the input on screen for visual reasons...
    $(this).parent().prev('input').val(new_qty);


    // submit the changes
        $.ajax({
        type: 'POST',
        url: '/backend/product_purchase_items.php',
        data: 'qty='+new_qty+'&item_id='+item_id,
        cache: false,
        success: function(data) {
          $('#product_purchase_items').html(data);
        }
        });     

});

As you can see, I'm repeating the following thing 3 times:

$(this).parent().prev('input')

I've been trying to work out how to put that in a variable so I don't have to repeat that code.

But in addition to that, the way this works is that if you hit the arrow 3 times, it does 3 seperate ajax posts. Ideally there would be a slight pause before sending the post.

How does one make a pause of say 300 milliseconds to see if there are further clicks of the arrows before submitting the post?

Answer 1

You can use setTimeout to debounce the event:

$('#checkout .arrows div').live('click',function(){
    var $this = $(this),
        data = $this.data(),
        $item = $(this).parent().prev('input');


    if(data['debounce_timer']) {
        clearTimeout(data['debounce_timer']);
    }

    $item.val(function(i, value) {
        return +value + $this.hasClass('more') ? 1 : -1;
    });

    // Maybe you have to store a reference to the quantity (value) here. 
    // Otherwise you might get strange results when the arrow was just 
    // clicked again when the callback is executed.

    var timer = setTimeout(function() {
        $.ajax({
            type: 'POST',
            url: '/backend/product_purchase_items.php',
            data: {qty: $item.val(), item_id: $item.attr('item_id')}
            cache: false,
            success: function(data) {
              $('#product_purchase_items').html(data);
            }
        });    
    }, 150); // <-- try different times

    data['debounce_timer'] = timer;
});

Things that changed/should be considered:

• Caching $(this).parent().prev('input') in a variable to not traverse the DOM every time to find the same element again.

• Passing a function to .val() ^[docs] and update the value "in one go".

• Using unary + to convert a string to a number, instead of parseInt. If you use parseInt, you have to pass the radix as second parameter (in your case 10), to prevent JS from interpreting numbers with leading zeroes as octal numbers.

• Using .hasClass() ^[docs] instead of comparing the class attribute. If the element has more than one class, the comparison will fail.

• Setting an object as value of the data option instead of a string. This ensures that the data is properly encoded.

• You really should use HTML5 data attributes instead of custom attributes (item_id). Even if the browser does not support HTML5 (yet), this is the safer way. With jQuery, you can even access them via the .data() method.

• Using setTimeout ^[MDN] to delay the Ajax call and storing a reference to the timer ID in .data() ^[docs]. When the handler is rapidly executed, a previous timer will be cancelled with clearTimeout ^[MDN], to prevent too many Ajax requests.

Answer 2

The answer to your first question is simple:

var associatedInput = $(this).parent().prev('input');
// which you use like this:
var current_qty = associatedInput.val();

As far as implementing a slight delay, here's one way to do it:

// following var declared outside your click handler, though not
// necessarily global because your code should probably be in a
// document ready handler:
var timerID = null;

// following within the click handler where your current $.ajax call is:
if (timerID != null) {
  clearTimeout(timerID);
}

timerID = setTimeout(function() {
                       timerID = null;
                       $.ajax(/*your existing ajax code/options here*/);
                     }, 300);

In case it's not obvious, the first time your click handler is called it will set a timeout to delay the ajax call. On second and subsequent clicks if there's already a timer ticking away it will be cleared (cancelled) and a new timeout set. So this keeps putting off the ajax call until the minimum 300 milliseconds has passed since the last click.

Answer 3

I would use something like:

var $input = $(this).closest("input.bag_qty");

Also, the variable new_qty is out of scope, you could do:

var new_qty = $(this).hasClass('more') ? parseInt(current_qty, 10) + 1 : parseInt(current_qty, 10) - 1;