jQuery Ajax 调用在意外循环中

jQuery Ajax call in an unexpected loop

本文关键字:循环 意外 Ajax 调用 jQuery      更新时间:2023-09-26

我正在开发一个应用程序,我在其中使用 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 调用也会被迭代。我使用断点来跟踪迭代,但从单击事件的位置开始,我无法找到它在第一次单击事件后触发的位置。使函数迭代的代码中是否有任何错误。请帮忙。

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

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

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