CODEWITHSUNDEEP
jquery
Imrul.H
Imrul.H

Reputation: 5870

jquery multiple clicks trigger once

I have a ajax function to update data in my shopping cart. In the success function of ajax I am calling another function which gives me a blinking effect(2 times) to the total price. Problem is, if I click update quantity multiple times quickly, then it keeps blinking for all the clicks. How can I make it blink just once for all the clicks? Here is my example code:

$(document).ready(function() {
$.ajax({
    data: {
        'action': 'update_cart_info'
    },
    url: '/wp-admin/admin-ajax.php',
    method: 'POST',
    success: function(result){
        // some other code
        blink_me(2, $('.cart-wrapper .cart-total-pris strong'));
    }
});
});

function blink_me(count_limit, $blink_elm){
    var count = 0;
    var interval = setInterval(function() {
        if ($blink_elm.hasClass('visibility-hidden')) {
            $blink_elm.removeClass('visibility-hidden'); 
            ++count;
        }
        else
            $blink_elm.addClass('visibility-hidden');

        if (count === count_limit) clearInterval(interval);
    }, 200);
}

Upvotes: 0

Views: 56

Answers (3)

MS Ibrahim
MS Ibrahim

Reputation: 1789

http://api.jquery.com/one/ with reference to the link

we can try something like this.

$('#myDiv').one('click', function() {
    $(this).append('...').click(function() { ... });
});

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

You can try something like this:

$(document).ready(function(){
    $.ajax({
        data: {
            'action': 'update_cart_info'
        },
        url: '/wp-admin/admin-ajax.php',
        method: 'POST',
        success: function(result) {
            if ($('.cart-wrapper .cart-total-pris strong').hasClass('blinking')) {
                return;
            }

            blink_me(2, $('.cart-wrapper .cart-total-pris strong'));
        }
    });
});

function blink_me(count_limit, $blink_elm)
{
    $blink_elm.addClass('blinking');

    var count = 0,
        interval = setInterval(function() {
            count++;

            $blink_elm.toggleClass('visibility-hidden');

            if (count === count_limit * 2) {
                $blink_elm.removeClass('blinking');
                clearInterval(interval);
            }
    }, 200);
}

Upvotes: 0

shanehoban
shanehoban

Reputation: 870

Create a boolean isFlashing like so:

var isFlashing = false;

$(document).ready(function() {
$.ajax({
    data: {
        'action': 'update_cart_info'
    },
    url: '/wp-admin/admin-ajax.php',
    method: 'POST',
    success: function(result){
        // some other code
        if(!isFlashing){
           isFlashing = true;
           blink_me(2, $('.cart-wrapper .cart-total-pris strong'));
        }
    }
});
});

function blink_me(count_limit, $blink_elm){
    var count = 0;
    var interval = setInterval(function() {
        if ($blink_elm.hasClass('visibility-hidden')) {
            $blink_elm.removeClass('visibility-hidden'); 
            ++count;
        }
        else
            $blink_elm.addClass('visibility-hidden');

        if (count === count_limit){
               clearInterval(interval);
               isFlashing = false;
           }
    }, 200);
}

Upvotes: 1

Related Questions