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調用也被迭代。我使用斷點來跟蹤迭代，但從點擊事件的角度來看，我無法找到它在第一次單擊事件後觸發的位置。 是否有任何錯誤的代碼，使函數迭代。請幫忙。

Answer 1

每次調用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; 
    })