如何调试这个JQuery函数？

我有一个命名的助手函数，可以从各种引导模式窗口调用，这些窗口是我正在处理的网站上的“购物助手”。此函数所做的一切就是启动对PHP页面的AJAX调用，该调用将返回一个JSON编码的数组。这很有效

不起作用的是我认为是函数最简单的部分：当调用函数时，它会在屏幕上覆盖一个微调器（该部分正在工作），当使用AJAX调用完成时，它应该隐藏微调器。这是不起作用的部分，我不知道为什么。我想我已经看了很久了，以至于我的大脑拒绝工作。代码如下：

function getDetailHandler(prodType, id, element) { // Takes type of product, ID number, and element name)
  $('#spinner').modal('show');
  $.ajax({
    url: '/productHelper.php?type=' + prodType + '&id=' + id,
    type: 'get',
    dataType: 'JSON',
    success: function(response) {
      var len = response.length;
      for (var i = 0; i < len; i++) {
        var id = response[i].id;
        var size = response[i].size;
        var msrp = response[i].msrp;
        var retail = response[i].retail;
        var description = response[i].description;
        var name = response[i].name;

        if (prodType == 2) {
          var tr_str = description;
        } else if (prodType == 3) {
          var tr_str = name + ' added';
        } else {
          var tr_str = size + ' added';
        }
      }
      $('#spinner').modal('hide');
      $('#' + element + '').append(tr_str);

    }
  });
};

函数getDetailHandler（prodType、id、element）{//获取产品类型、id编号和元素名称）
$（“#微调器”）.modal（'show'）；
$.ajax({
url:'/productHelper.php？type='+prodType+'&id='+id，
键入：“get”，
数据类型：“JSON”，
成功：功能（响应）{
var len=响应长度；
对于（变量i=0；i

让我困惑的是，函数的其他部分都工作得很好。它只是拒绝在最后隐藏模态。显然这是我的错，但我真的看不出我做错了什么

编辑时： 以下是调用函数：

$('#controlForm').submit(function(e) {
    var sum = 0;
    e.preventDefault();
    $('#addControl').show();
    $('#addControl').append($(document.activeElement).attr('value'));
    $('#addControl').append('<span class="addLightText" style="display:inline";></span><a href="#removeControl" class="removeControl"><i class="fa fa-times-circle fa-2x" name="removeControl" title="Remove Control From Configuration" style="color: Tomato; position: relative;margin-left: 10px; top: 5px;"></i></a>');
    $('#addControl').data('price', $(document.activeElement).attr('value'));
    $('#addControl').attr('data-idnumber', $(document.activeElement).attr('id'));
    $('#addControl').attr('data-price', $(document.activeElement).attr('value'));
    $('#addToCart').append('<input type="hidden" name="controlID" value="' + $(document.activeElement).attr('id') + '" />');
    getDetailHandler(3, $('#addControl').attr('data-idnumber'), 'controlUpdated');
    doSum();

    $('#addControlButtonElement').hide();
    $('#addControlModal').modal('toggle');
});

$（'#controlForm'）。提交（函数（e）{
var总和=0；
e、 预防默认值（）；
$（'#addControl'）.show（）；
$（'#addControl'）.append（$（document.activeElement.attr（'value'））；
$（'#addControl'）。追加（''）；
$（'#addControl'）.data（'price'，$（document.activeElement）.attr（'value'））；
$（'#addControl'）.attr（'data-idnumber'，$（document.activeElement）.attr（'id'））；
$（'#addControl'）.attr（'data-price'，$（document.activeElement）.attr（'value'）；
$（'#addToCart'）。附加（''）；
getDetailHandler（3，$（'#addControl'）.attr（'data-idnumber'），'controlUpdated'）；
doSum（）；
$（'#addControlButtonElement'）.hide（）；
$（'#addControlModal'）.modal（'toggle'）；
});

现在修复 最后，我使用我在这里找到的内容修改了函数，以便更紧密地钩住Ajax的启动和停止函数：。它就像一个符咒

感谢大家抽出时间：）

函数getDetailHandler（prodType、id、元素）{ $.ajax({ url:'/productHelper.php？type='+prodType+'&id='+id， 键入：“get”， 数据类型：“JSON”， 成功：功能（响应）{ var len=响应长度；

---

对于（var i=0；i调用hide时，可能显示仍在转换。查看Bootstrap modal.js文件，如果使用'fade'类，则在show函数中设置了一个_IsTransitioningGuard。如果调用hide时_isTransitioning为true，则忽略hide

要测试这一点，请尝试使用settimeout函数包装隐藏，比如500ms，然后查看隐藏是否有效

setTimeout(function(){$('#spinner').modal('hide')}, 500);

---

控制台中有错误吗？你能分享一个正在工作的演示吗？尝试一下，在函数完成并且微调器仍然存在后，打开控制台并运行

$（'#微调器'）.modal（'hide'）；

，看看是否有效。我试过$（'#微调器'）.modal（'hide'））；控制台中的函数，并且它工作了？？？呵呵，现在我真的很困惑。控制台中没有错误。我将按照您的要求发布一个工作演示，Nidhin Joseph。现在正在工作：）这就是发生的事情，也是为什么没有错误的原因！我在不久前怀疑是这样的情况下改变了函数。我将在这里发布我的固定代码，以防其他人也有同样的问题

setTimeout(function(){$('#spinner').modal('hide')}, 500);