javascript函数属性设置器中的延迟
delay in javascript function attribute setter
我们在单击按钮时调用一个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");
}
}
我们面临的问题是,如果用户同时单击按钮,那么在按钮被实际禁用之前,函数会被调用两次。。
感谢任何帮助。。
您没有阻止按钮的默认行为,因此即使您设置了禁用属性,按钮也会继续其正常行为。
在这个例子中,我添加了一个事件监听器(而不是使用内联onclick属性),并防止按钮的默认行为。然后我设置禁用的属性(不是属性)。检查浏览器的控制台,即使双击,"点击"的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>
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");
}
});
}
这应该是一个解决方案。
jQuery('.myButton').bind('dblclick',function(e){
e.preventDefault();
})
相关文章:
- 在延迟时设置Whois脚本
- 如何通过justinaguilar.com设置动画延迟?[解决]
- JQueryAJAX:防止由于设置间隔函数而导致的延迟
- 延迟设置超时()
- 为什么即使 setTimeout 设置为 0 延迟也会有延迟
- 如何设置延迟
- javascript函数属性设置器中的延迟
- jQuery Banner Rotator插件中的延迟设置不起作用
- 我们如何在下拉子菜单中设置5秒的时间或延迟
- 在JS文件中设置延迟以调用JS文件
- 是否可能/如何像谷歌插件一样为jQuery自动完成设置延迟
- 在初始化之前设置延迟或超时
- 设置蓝鸟承诺分辨率.js最小延迟
- 如何停止来自设置间隔的延迟
- 设置超时动态延迟
- 在 JavaScript 中设置延迟时间
- 在 jquery 表单序列化变量中设置 jquery 延迟
- 从 html 数据设置 jquery 延迟
- 清除消息 jQuery 延迟设置超时
- 将执行延迟设置为窗口调整大小功能