javascript - jQuery Ajax 调用出现意外循环

Question

我正在开发一个使用 ajax 调用加载内容的应用程序。但在某种情况下，我在循环中收到 ajax 调用，但它以随机迭代结束。下面是从双击事件到最终 ajax 调用的顺序代码。

//I use the double click event to fire the function
$('.item-container').on('click', '.item', function(e) {
    var posX = e.pageX;
    var posY = e.pageY;
    var element = $(this);
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            showToolTip(posX,posY,element);
        }
    }, 300);
}).on('dblclick', '.item', function(e) {
    $(this).data('double', 2);
    addItemsToBill(this);
});


function addItemsToBill(selectedItem) {


var element = null;

$(".bill-item-list").each(function() {
    if ($(this).css("display") == "block") {
        element = $(this);
        return;
    }
});

if (element == null) {
    getSystemMessage(BILL_SELECT_VALIDATION_MSG);
    return;
}

if ($('#open-tab .bill-list').find(".bill-item-list").length == 0
        && $(element).find('.bill-item').length == 0) {
    getSystemMessage(BILL_SELECT_VALIDATION_MSG);
    return;
}

var bill = $('.sample-elements').find('.bill-item');
var clone = bill.clone();
var itemId = $(selectedItem).attr('id');
var billId = $(element).parent().attr('id');

if ($(selectedItem).attr('isopen') == '1') {

    $('.open-item-popup-overlay').lightbox_me( {
        centered : true,
        destroyOnClose : false,
    });

    $('.itmRate').val('');
    $('#itmAmt').html('0.00');
    $('.itemQty').text('1');

    $('.itm-cancel').click(function() {
        $('.open-item-popup-overlay').trigger('close');
    });

            //when the first run goes it's fine, bt after that, the looping starts from here. I double checked whether there is another code segment which fires this but there are none.
    $('.itm-ok').click(function(){
        if ($('.itmRate').val() == "") {
            getSystemMessage(AMOUNT_INPUT);
            return;
        }
                    //This function gets iterated multiple times if I run the same event for multiple times.
                    //The function is only used in this two locations and no any other places.
        billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true);
        return false;
    })

} else {
    billItemDrop(itemId, billId, clone, selectedItem, null, element, 0,true);
}
}

function billItemDrop(itemId, billId, billItemClone, doubleClickedItem,draggableHelper, catchElement, isOpen, isDoubleClick) {

var openItemQuantity =  stringToDouble($('.itemQty').val());
var openItemRate = stringToDouble($('.itmRate').val());
var openItemAmount = openItemQuantity * openItemRate;

var ajaxObject = 'itemId=' + itemId + '&billId=' + billId + '&qty='
        + openItemQuantity + '&rate=' + openItemRate + '&openItem='
        + isOpen;

ajaxCall(ADD_ITEM_TO_BILL,AJAX_POST,ajaxObject,function(response) {

            var responseObject = response.billDetail;
            var billTotal = responseObject.billTotal;

            var total = response.billDetail.rate * response.billDetail.qty;

            // Add Items to the bill failed
            if (response.status != "success") {
                getSystemMessage(ADD_ITEM_TO_PRINTED_BILL);
                return;
            }

            billItemClone.attr('itemId', responseObject.itemId);
            billItemClone.attr('billDetailId', responseObject.billDetailId);

            billItemClone.find('.bill-item-name').text(
                    responseObject.itemName);
            billItemClone.find('.bill-item-rate span').text(
                    responseObject.rate.toFixed(2));
            billItemClone.find('.bill-item-amount').text(
                    total.toFixed(2));
            billItemClone.find('.bill-item-qty span').text(responseObject.qty);

            if (responseObject.kotBotNo != null) {
                billItemClone.find('.kot-bot-num').text(
                        responseObject.kotBotNo);
            }

            billItemClone.draggable( {
                revert : false,
                addClasses : false,
                zIndex : 1,
                containment : "window",
                opacity : 0.5,
                cursor : "move",
                scroll : false,
                helper : function() {
                    return $(this).clone().appendTo('body').show();
                }
            });

            if (isDoubleClick == true
                    && (doubleClickedItem != undefined
                            || doubleClickedItem != null || doubelClickedItem != "")) {
                billItemClone.find('.bill-item-img img').attr('src',
                        $(doubleClickedItem).css('background-image'));
            } else if (isDoubleClick == false
                    && (draggableHelper != undefined
                            || drdraggableHelper != null || draggableHelper != "")) {
                billItemClone.find('.bill-item-img img').attr('src',
                        draggableHelper.css('background-image'));
            }

            if (catchElement.height() > 300) {
                catchElement.css('overflow-y', 'scroll');
                catchElement.css('height', '320px');
            }

            if (catchElement.find('.bill-item').length == 0) {
                billItemClone.insertBefore(
                        catchElement.find('.item-drop-point')).hide()
                        .fadeIn("slow");
            } else {
                billItemClone.insertBefore(
                        catchElement.find('.bill-item').first()).hide()
                        .fadeIn("slow");
            }

            catchElement.parent().find('.amount')
                    .html(billTotal.toFixed(2));

            if (draggableHelper != undefined || draggableHelper != null) {
                draggableHelper.hide('fade', function() {
                    draggableHelper.remove()
                });
            }

            $('.item-drop-point').removeClass('item-drop-hover');

        },false);
}

/**
 * 
 * Function for ajax calls - url : webservice url - type : ajax call type - data :
 * data that needs to be passed - callback : function that needs to be executed
 * 
 * when ajax call succeed
 * 
 * @param url
 * @param type
 * @param data
 * @param callback
 */
function ajaxCall(url, type, data, callback,async){

// Assign default value to async if its not specified
if (async===undefined) async = true;

$.ajax({
    url: url,
    type: type,
    data: data,
    dataType : "json",
    cache: false,
    beforeSend: function(x){
    if(x && x.overrideMimeType){
        x.overrideMimeType("application/json;charset=UTF-8");
        }
    },
    async : async,
    success:callback
});
}

该函数会迭代，因此 ajax 调用也会迭代。我使用断点来跟踪迭代，但从单击事件的 Angular 来看，我无法找到在第一次单击事件后触发它的位置。代码中是否有任何问题导致函数迭代。请帮忙。

Answer 1

每次调用 addItemsToBill(this); 时，您都会向 $('.itm-ok') 添加新的事件处理程序

尝试删除对 billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true); 的调用，并将其替换为 console.log('Test' 如果您发现每次单击时都会生成多个控制台日志，则问题是每次单击都由多个处理程序处理。如果是这种情况，并且您确实想使用此结构，则必须取消绑定(bind)您的单击重新绑定(bind)之前的处理程序。

$('.itm-ok').off('click')
$('.itm-ok').on('click',function(){
        if ($('.itmRate').val() == "") {
            getSystemMessage(AMOUNT_INPUT);
            return;
        }
                    //This function gets iterated multiple times if I run the same event for multiple times.
                    //The function is only used in this two locations and no any other places.
        billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true);
        return false;
    })