javascript - 防止向触发 ajax 调用的按钮发送垃圾邮件

Question

我有两个按钮，可以添加或减去产品的数量，并使用 ajax 更新数字收据上的价格等。问题是，当用户向按钮发送垃圾邮件时，数量与输入框中的数量不一致。

例如，如果我点击得非常快，输入框的数量值为 10，收据上会显示 8。

我怎样才能防止这种情况发生？

我想只在 ajax 调用完成后让按钮触发该函数。

这是我的代码:

$(".formatenkeuze .plusmin").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
  if($('#aantalinput').val() > 0) {
    $('.formateninput').removeClass('alertmessage');
    $('.controlemelding').hide();

    var form_data = $("#formsid form").serialize();
    $.ajax({
      type:'post',
      url:"catalog/calcdiv.php",
      data:({form_data: form_data}),
      success:function(data){
        var obj = JSON.parse(data);
        $( "#ajaxresult" ).empty().append( obj[0].productinfo );
        $('#prijsonder').empty().append($('#prijs').html());
      }
    });

  } else{
    $('.formateninput').addClass('alertmessage');
    $('.controlemelding').css('display','flex');
  }
});

也许将变量设置为 false单击并仅将其设置为 true当 ajax 调用完成时，仅当变量设置为 true 时才触发函数？

Answer 1

假设按钮是 <input type="button">或<button>元素，那么您可以在发送 AJAX 请求之前禁用它，并在调用完成时再次启用它。试试这个:

$(".formatenkeuze .plusmin").on("click", function(e) {
  var $button = $(this).prop('disabled', true), // disable here
    $formateninput = $('.formateninput'),
    $controlemelding = $('.controlemelding');

  if ($('#aantalinput').val() > 0) {
    $formateninput.removeClass('alertmessage');
    $controlemelding.hide();

    var form_data = $("#formsid form").serialize();
    $.ajax({
      type: 'post',
      url: "catalog/calcdiv.php",
      data: { form_data: form_data },
      success: function(data) {
        var obj = JSON.parse(data);
        $("#ajaxresult").html(obj[0].productinfo);
        $('#prijsonder').html($('#prijs').html());
      },
      complete: function() {
        $button.prop('disabled', false); // enable here
      }
    });
  } else {
    $formateninput.addClass('alertmessage');
    $controlemelding.css('display', 'flex');
  }
});