多次调用并取消admin-ajax.php文件

我在Wordpress安装插件时遇到了一个问题。有一个日历，您可以单击一天（或一系列天），从ajax调用到

admin ajax.php

它计算产品成本

问题是，当我单击日历单元格时，

admin ajax.php

会被调用两次。第一次持续几毫秒，并立即取消。然后自动地，它再次调用它并得到ajax响应。当我第二次单击日历单元格时，

admin ajax.php

会被调用3次。前两个被取消，只有最后一个得到响应

我发现用于此部分的代码如下所示。然而，我找不到任何问题，即使我可以在开发者控制台上看到那些被取消的调用

$('.wc-bookings-booking-form')
        .on('change', 'input, select', function() {
            var index = $('.wc-bookings-booking-form').index(this);

            if ( xhr[index] ) {
                xhr[index].abort();
            }

            $form = $(this).closest('form');

            var required_fields = $form.find('input.required_for_calculation');
            var filled          = true;
            $.each( required_fields, function( index, field ) {
                var value = $(field).val();
                if ( ! value ) {
                    filled = false;
                }
            });
            if ( ! filled ) {
                $form.find('.wc-bookings-booking-cost').hide();
                return;
            }

            $form.find('.wc-bookings-booking-cost').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();

            xhr[index] = $.ajax({
                type:       'POST',
                url:        booking_form_params.ajax_url,
                data:       {
                    action: 'wc_bookings_calculate_costs',
                    form:   $form.serialize()
                },
                success:    function( code ) {
                    if ( code.charAt(0) !== '{' ) {
                        console.log( code );
                        code = '{' + code.split(/\{(.+)?/)[1];
                    }

                    result = $.parseJSON( code );

                    if ( result.result == 'ERROR' ) {
                        $form.find('.wc-bookings-booking-cost').html( result.html );
                        $form.find('.wc-bookings-booking-cost').unblock();
                        $form.find('.single_add_to_cart_button').addClass('disabled');
                    } else if ( result.result == 'SUCCESS' ) {
                        $form.find('.wc-bookings-booking-cost').html( result.html );
                        $form.find('.wc-bookings-booking-cost').unblock();
                        $form.find('.single_add_to_cart_button').removeClass('disabled');
                    } else {
                        $form.find('.wc-bookings-booking-cost').hide();
                        $form.find('.single_add_to_cart_button').addClass('disabled');
                        console.log( code );
                    }
                },
                error: function() {
                    $form.find('.wc-bookings-booking-cost').hide();
                    $form.find('.single_add_to_cart_button').addClass('disabled');
                },
                dataType:   "html"
            });
        })
        .each(function(){
            var button = $(this).closest('form').find('.single_add_to_cart_button');

            button.addClass('disabled');
        });

下面是开发人员控制台的屏幕截图：

编辑：我想我找到了问题，但我不确定。还有这部分代码本来是不应该被使用的。日历上有一个时间功能，但未激活。因此，不应运行此代码

$('.wc-bookings-booking-form').on( 'date-selected', function() {
        show_available_time_blocks( this );
    });

    var xhr;

    function show_available_time_blocks( element ) {
        var $form               = $(element).closest('form');
        var block_picker        = $form.find('.block-picker');
        var fieldset            = $form.find('.wc_bookings_field_start_date');

        var year  = parseInt( fieldset.find( 'input.booking_date_year' ).val(), 10 );
        var month = parseInt( fieldset.find( 'input.booking_date_month' ).val(), 10 );
        var day   = parseInt( fieldset.find( 'input.booking_date_day' ).val(), 10 );

        if ( ! year || ! month || ! day ) {
            return;
        }

        // clear blocks
        block_picker.closest('div').find('input').val( '' ).change();
        block_picker.closest('div').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();

        // Get blocks via ajax
        if ( xhr ) xhr.abort();

        xhr = $.ajax({
            type:       'POST',
            url:        booking_form_params.ajax_url,
            data:       {
                action: 'wc_bookings_get_blocks',
                form:   $form.serialize()
            },
            success: function( code ) {
                block_picker.html( code );
                resize_blocks();
                block_picker.closest('div').unblock();
            },
            dataType:   "html"
        });
    }

---

从您描述的情况来看，您似乎不止一次地将函数绑定到对象。我看不到您将

单击事件

绑定到_日历单元格u的位置（您没有包含在代码中）。如果你能在这里包含这部分代码，也许我们可以帮助你。@EhsanT我认为你是对的。你能现在检查编辑吗？很抱歉我回复晚了，你添加的部分也没有问题。这是一个调用

ajax

的函数，但是您必须检查

单击事件的绑定是否被多次调用。您是否可以与我们共享您的整个
js
文件？还有一个问题，正如你提到的，当你第一次点击日历时，第三次还是第四次，你会得到4个和5个
ajax
调用吗？从你的描述来看，你似乎不止一次地将函数绑定到对象。我看不到您将
单击事件
绑定到_日历单元格u的位置（您没有包含在代码中）。如果你能在这里包含这部分代码，也许我们可以帮助你。@EhsanT我认为你是对的。你能现在检查编辑吗？很抱歉我回复晚了，你添加的部分也没有问题。这是一个调用
ajax
的函数，但是您必须检查
单击事件的绑定是否被多次调用。您是否可以与我们共享您的整个
js
文件？还有一个问题，正如你提到的，当你第一次点击日历时，第三次还是第四次，你会接到4次和5次
ajax
呼叫吗？