javascript - 根据现有功能禁用/启用 HTML 按钮

Question

我有一个从 HTML 按钮运行 onclick 的函数，需要添加在成功时禁用按钮，但在返回 = false 时不禁用按钮。

我尝试过直接在 HTML 中切换、禁用并在当前函数中插入更改 HTML 属性。

var amtCount = 0;
function addToLineItem() 
{
var totalAmount = 0.0;
var valid = true;
var difference = [];
$.each($(".tbodys tr"),function(index,vs)
{
for(var tdcnt = 0; tdcnt < vs.children.length - 1; tdcnt++)
{
        if(tdcnt != 5)
        if(vs.children[tdcnt].firstElementChild.value == "" || vs.children[tdcnt].firstElementChild.value == undefined)
            valid = false;
    }

    if(vs.children[9].firstChild.value != "" && vs.children[9].firstChild.value != undefined)
    {
        RMID.push(vs.children[9].firstChild.value);
    }
});

if(CodingListItem.length > 0)
{
    difference = arr_diff(CodingListItem,RMID);
}

if(valid == false)
{
alert("Message");
    return false;
}

if($("#aprDate").val() == "")
{
    alert("Please date.");
    return false;
}

$.each($(".tbodys tr .nine"),function(index,vs){
    totalAmount += parseFloat(vs.firstElementChild.value.replace(/,/g, ""));
});

if($("#Total")[0].innerText == "")
{
    alert("Please .");
    return false;
}

//if(parseFloat($("#invTotal").val().replace(/,/g, "")) != totalAmount)
if(parseFloat($("#invTotal").val().replace(/,/g, "")) != parseFloat($("#Total")[0].innerText.replace(/,/g, "")))
{
    alert("total amount does not match.");
    return false;
}

 SP.SOD.executeFunc("sp.js", 'SP.ClientContext', function()
 {
    try
    {
        var clientContext = SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var oList = clientContext.get_web().get_lists().getByTitle('Invoice');


        if(difference.length > 0)
        {
            $.each(difference, function( index, value ) 
            {
                deleteListItem(parseInt(value));
            });
        }


        $.each($(".tbodys tr"),function(i,v)
        {
            if(v.children[9].firstChild.value != "" && v.children[9].firstChild.value != undefined)
            {
                var itemType1 = GetItemTypeForListName("InvoiceLineItem");

                var item1 = {
                    "__metadata": { "type": itemType1 },
                    "Title": v.children[0].firstChild.value,
                    "InvoiceIDId": parseInt(INV),
                    "Entity": v.children[1].firstChild.value,
                    "MS": v.children[2].firstChild.value,
                    "LocationId": parseInt(v.children[3].firstChild.value),
                    "DepartmentId": parseInt(v.children[4].firstChild.value),
                    "Account": v.children[5].children[1].options[v.children[5].children[1].selectedIndex].text,
                    "SubAccount": v.children[6].firstChild.value,
                    "GLCode": v.children[7].firstChild.value,
                    "Amount": v.children[8].firstChild.value
                };

                updateListItem(parseInt(v.children[9].firstChild.value), "Invoice Approval and Coding", _spPageContextInfo.webAbsoluteUrl, item1, function () {

                    amtCount = amtCount + 1;
                    updatePendingInvoice(amtCount); 
                }, function () { errorMsg = true; });
            }
            else
            {
                var itemCreateInfo = new SP.ListItemCreationInformation();
                var oListItem = oList.addItem(itemCreateInfo);  

                oListItem.set_item('Title', v.children[0].firstChild.value);  //Line Description
                oListItem.set_item('InvoiceID', INV); 
                oListItem.set_item('Entity', v.children[1].firstChild.value); 
                oListItem.set_item('MS', v.children[2].firstChild.value); 
                oListItem.set_item('Location', v.children[3].firstChild.value); 
                oListItem.set_item('Department', v.children[4].firstChild.value);
                oListItem.set_item('Account', v.children[5].children[1].options[v.children[5].children[1].selectedIndex].text); 
                oListItem.set_item('SubAccount', v.children[6].firstChild.value); 
                oListItem.set_item('GLCode', v.children[7].firstChild.value); 
                oListItem.set_item('Amount', v.children[8].firstChild.value); 
                oListItem.set_item('Date', $("#aprDate").val()); 
                oListItem.set_item('Comment', $("#cmt").val()); 

                oListItem.update();
                clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
            }
        });


    }
    catch(err)
    {
        alert(err.message);
  }
});
}

function onQuerySucceeded() 
{

amtCount = amtCount + 1;
updatePendingInvoice(amtCount);


}

function onQueryFailed(sender, args) 
{
alert('not inserted');
}

这运行良好，但如果快速单击 HTML 按钮，该函数将运行并创建重复数据。

Answer 1

您应该在单击时禁用该按钮。然后，在第一个更新完成之前，用户无法排队另一个更新。设置一个内部变量表示工作正在进行中，禁用按钮，然后在获得结果(成功或失败)时清除标志。

例如:

$("#btnSubmit").click(function() {
  $("#btnSubmit").prop("disabled", true);
  // do your work here, waiting for success or failure
  $('#btnSubmit').prop("disabled", false);
})

或者:

$("button").click(function(e) {
  $(e.currentTarget).prop('disabled', true);
  window.setTimeout(function() {
    $(e.currentTarget).prop('disabled', false);
  }, 5000);
})