Question

我有一个ajax功能来更新购物车中的数据。在ajax的成功功能中，我正在调用另一个函数，它给了我一个总价格的闪烁效果（2倍）。问题是，如果我快速点击多次更新数量，那么所有点击都会一直闪烁。如何让所有点击一次闪烁一次？这是我的示例代码：

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

Answer 1

像这样创建一个布尔isFlashing：

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

Answer 2

您可以尝试这样的事情：

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

Answer 3

http://api.jquery.com/one/参考链接

我们可以尝试这样的事情。

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

jquery多次点击触发一次

3 个答案: