Функция AJAX вызывается первой даже до первой строки нажатия кнопки jQuery, почему?

Question

Я работаю над приложением MVC, где мне нужно скрыть кнопку при нажатии кнопки и показать, когда запрос ajax завершен.Но кнопка скрывается после того, как весь запрос завершен.Ниже приведено то, что я пробовал.

<input type="button" id="btnCalculateAndSave" value="Calculate & Save" style="float: right" />

Ниже приведен даже щелчок jQuery, в котором также есть функция ajax, вызывающая одно и то же нажатие кнопки.

$("#btnCalculateAndSave").on("click", function (e) {
  $("#btnCalculateAndSave").hide();

  //Several lines for validation

  $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
}
});

Поскольку я должен предотвратить многократное нажатие кнопкисобытие клика.Так что кнопка скрывается, но после того, как весь процесс ajax произошел, даже код скрытия кнопки находится в первой строке события нажатия jQuery.

Answer 1

Пожалуйста, напишите основной код внутри функции скрытия.

$("#btnCalculateAndSave").hide(function(){ /* Main Code */ });

Ниже приведен ваш основной код.

 $("#btnCalculateAndSave").on("click", function (e) {
      $("#btnCalculateAndSave").hide(function(){

 $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

});

});

Answer 2

Надеюсь, это поможет,

    var pr;
    $("#btnCalculateAndSave").on("click", function (e) {
              var btn = $(this)
              btn.hide()   

             if(pr)
                 pr.abort() //Prevent multiple time click

            //Several lines for validation
            pr =    $.ajax({
            url: '@Url.Action("myControllerFunction", "myController")',
            type: "GET",
            async: false,
            cache: false,
            dataType: "JSON",
            data: { 
              "p1": v1, 
              "p2": v2
            },
            success: function(result) {
                     btn.show()
            }  
          }
        }
    });

Answer 3

Вы можете использовать что-то вроде этого:

$("#btnCalculateAndSave").on("click", function (e) {
    $("#btnCalculateAndSave").hide(0, ajaxCall);
    //.....
    //Several lines for validation
    //.....

});

function ajaxCall() {

    $.ajax({
        url: '@Url.Action("myControllerFunction", "myController")',
        type: "GET",
        async: false,
        cache: false,
        dataType: "JSON",
        data: { "p1": v1, "p2": v2 },
        success: function (result) {
            //Add this line
            $("#btnCalculateAndSave").show();
        }
    });
}

Answer 4

Вы сначала скрываете кнопку при нажатии на $("#btnCalculateAndSave").hide();, но нет инструкции по удалению послесловия кнопки.

По вашему вопросу, вам нужно показать кнопку после завершения вызова ajax.Итак, что вы можете сделать, это поставить код для отображения кнопки в ajax success

$("#btnCalculateAndSave").on("click", function (e) {
   $("#btnCalculateAndSave").hide();
   .....
   //Several lines for validation
   .....
   $.ajax({
                    url: '@Url.Action("myControllerFunction", "myController")',
                    type: "GET",
                    async: false,
                    cache: false,
                    dataType: "JSON",
                    data: { "p1": v1, "p2": v2},
                    success: function (result) { 
//Add this line
$("#btnCalculateAndSave").show();  

                            }  
                        }
                    }
            });