Задержка между щелчком мыши и выполнением функции с помощью jQuery

Question

У меня странная проблема.

При нажатии на кнопки Yes или No я пытаюсь выполнить функцию суммирования значений в списке элементов.

<ч />

Это рабочий пример: https://jsfiddle.net/k4b1awgp/

$('li.nav-item').click(function() {
    $(this).closest("ul").find('a').removeClass("active");
    $(this).closest("ul").find('i').hide();
    $(this).find("a").addClass("active");
    $(this).find("i").show();
    updateTotal();
});
$('li.nav-item:nth-child(2) .fa-check').css("display","none");

<ч />

Это не рабочий пример: https://jsfiddle.net/ceuL8p1k/

$('li.nav-item').click(function() {
    updateTotal();
});

function updateTotal() {
    var total = 0;
    $('a.active').each(function(){
        total += isNaN(parseInt($(this).parent().data('value'))) ? 0 : parseInt($(this).parent().data('value'));
    });
    $('#total').html(total);
}

updateTotal();

В этом примере это не работает, если я не нажму второй раз на Yes или No.

<ч />

Знаешь почему?

Нужно ли мне ставить sleep подобную функцию PHP?

Спасибо за любую помощь.

Answer 1

Согласно документации :

показано.bs.tab : это событие вызывается на вкладке после ее отображения. Используйте event.target и event.relatedTarget для нацеливания на активную вкладку и предыдущую активную вкладку (если доступно) соответственно.

Следовательно, я предлагаю изменить ваш обработчик событий клика на:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    updateTotal();
});

Нет необходимости добавлять задержку. Достаточно запустить вашу функцию после переключения.

function updateTotal() {
    var total = 0;
    $('a.active').each(function(){
        total += isNaN(parseInt($(this).parent().data('value'))) ? 0 : parseInt($(this).parent().data('value'));
    });
    $('#total').html(total);
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    updateTotal();
});
updateTotal();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >

Total:
<div id="total"></div>

<div class="col-lg-8">
    <div class="row">
        <div class="col-lg-6">
            <h2>Item 1 - $50</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="item_1" data-name="Item 1" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                        No
                    </a>
                </li>
                <li class="nav-item" data-id="item_1" data-name="Item 1" data-rate="Yes" data-value="50">
                    <a class="nav-link" data-toggle="tab" href="#">
                        Yes
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Item 2 - $250</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="item_2" data-name="Item 2" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                        No
                    </a>
                </li>
                <li class="nav-item" data-id="item_2" data-name="Item 2" data-rate="Yes" data-value="250">
                    <a class="nav-link" data-toggle="tab" href="#">
                        Yes
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Item 3 - $75</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="item_3" data-name="Item 3" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                        No
                    </a>
                </li>
                <li class="nav-item" data-id="item_3" data-name="Item 3" data-rate="Yes" data-value="75">
                    <a class="nav-link" data-toggle="tab" href="#">
                        Yes
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>