javacriptの関数の属性の設定での遅延

Question

ボタンのクリックでjavascript関数を呼び出し、その関数の最初の行でそのボタンを無効にします。私たちが直面している問題は、ユーザーが同時にボタンをクリックした場合ということです

<button class="btn btn-primary DialogSaveBtn" onclick="SavePatientExamination();">Save changes</button> 

    function SavePatientMedicine() 
{ 
    $(".DialogSaveBtn").attr("disabled", "disabled"); 

    var patId = $("#PatId").val(); 
    var appId = $("#PatAppId").val(); 
    var visitNo = $("#PatVisitNo").val(); 

    var valid = true; 
    var data = new Array(); 
    var tablecount = 0; 
    $("#MedListTbl .DataRow").each(function() { 
     debugger; 
     if ($(this).find(".MedDays").val() == "" || $(this).find(".MedDays").val() <= 0 ||parseInt($(this).find(".MedDays").val())!= parseFloat($(this).find(".MedDays").val())) 
     { 
      alert("please enter valid 'Days' for medicines."); 
      valid = false; 
      return false; 
     } 
     tablecount = tablecount + 1; 
     var row = { 
      "iPMID": $(this).find(".RecId").val(), 
      "PatId": patId, 
      "AppId": appId, 
      "MedicineId": $(this).find(".MedId").val(), 

     }; 

     data.push(row); 
    }); 
    if (tablecount > 0 && valid) { 
     $.ajax({ 
      url: '@Url.Action("SavePatientMedicine","OPD")', 
      type: "POST", 
      dataType: 'json', 
      contentType: 'application/json;', 
      data: JSON.stringify(data), 
      success: function (msg) { 
       if (msg == true) { 
        toastr.success('Record Added Successfully', 'Medicine'); 
        var appId = $("#PatAppId").val(); 

        $('#OPDMedDialog').modal('hide'); 
        $(".DialogSaveBtn").removeAttr("disabled"); 
       } else { 
        alert("Unable to save data"); 
        $(".DialogSaveBtn").removeAttr("disabled"); 
       } 
      }, 
      error: function() { 
       alert("an error occured while saving data"); 
       $(".DialogSaveBtn").removeAttr("disabled"); 
      } 
     }); 
    } 
    else { 
     // $(".DialogSaveBtn").removeAttr("disabled"); 
    } 

} 

：下のよう

のコード例は、（ユーザーが同じボタンを複数回押さないように、私たちはそのボタンを無効にする必要があります）ボタンが実際に無効になる前に、関数が2回呼び出されます。..

任意のヘルプ感謝..

Answer 1

function SavePatientMedicine() { 
    $(".DialogSaveBtn").attr("disabled", "disabled"); 

    $.ajax({ 
    method: "POST", 
    url: "your url", 
    dataType: "json", 
    success:function(data) { 
     $(".DialogSaveBtn").removeAttr("disabled"); 
    }, 
    error: function (jqXHR, exception) { 
     $(".DialogSaveBtn").removeAttr("disabled"); 
    } 
    }); 

} 

これが解決策になるはずです。

Answer 2

jQuery('.myButton').bind('dblclick',function(e){ 
    e.preventDefault(); 
}) 

Answer 3

ボタンのデフォルトの動作を妨げないので、無効な属性を設定してもボタンは通常の動作を続けます。

この例では、インラインonclick属性を使用するのではなく、イベントリスナーを追加して、ボタンのデフォルト動作を防止しました。それから、無効化されたプロパティ（属性ではない）を設定しています。ダブルクリックしても、クリックされたconsole.logが1回だけ起動されることをブラウザのコンソールで確認してください。

$(function(){ 
 
    $(".DialogSaveBtn").on("click",SavePatientMedicine); 
 
    
 
    function SavePatientMedicine(e){ 
 
     //prevent the normal button behaviour 
 
     e.preventDefault(); 
 
     //set disabled property (not attr) 
 
     $(".DialogSaveBtn").prop("disabled", true); 
 
     //... 
 
     console.log("clicked"); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn btn-primary DialogSaveBtn">Save changes</button>

UPDATE：

場所にインラインでイベントを残して（あなたのコメントに要求されるように）単に関数にeventを渡す：

 
    function SavePatientMedicine(e){ 
 
     //prevent the normal button behaviour 
 
     e.preventDefault(); 
 
     //set disabled property (not attr) 
 
     $(".DialogSaveBtn").prop("disabled", true); 
 
     //... 
 
     console.log("clicked"); 
 
    } 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn btn-primary DialogSaveBtn" onclick="SavePatientMedicine(event)">Save changes</button>