延迟javascript函数属性setter

时间:2016-04-06 11:14:04

标签: javascript

我们在点击按钮时调用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");
    }

}

我们面临的问题是,如果用户同时点击按钮,则在实际禁用按钮之前调用该函数两次。

任何帮助表示赞赏..

3 个答案:

答案 0 :(得分:1)

你没有阻止按钮的默认行为,所以即使你设置了禁用attr,按钮也会继续正常行为。

在这个例子中,我添加了一个事件监听器(而不是使用内联onclick属性)并阻止按钮的默认行为。然后我设置了禁用的属性(非属性)。检查浏览器的控制台,看看即使双击也只会触发一次“clicked”的console.log。

$(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>

<强>更新

要保留内联事件(根据评论中的要求),只需将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>

答案 1 :(得分:0)

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");
    }
  });

}

这应该是一个解决方案。

答案 2 :(得分:0)

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