防止来自ajax的多个请求

Question

我有“更多加载”按钮，如果单击得足够快，它将两次加载相同的内容，因此我想防止它。

这就是我用ajax调用更多负载的方式：

<script type="text/javascript">
  function loadmore() {
    var val = document.getElementById("result_no").value;
    var userval = document.getElementById("user_id").value;
    $.ajax({
      type: 'post',
      url: 'fetch.php',
      data: {
        getresult: val,
        getuserid: userval
      },
      context: this,
      success: function(response) {
        var content = document.getElementById("result_para");
        content.innerHTML = content.innerHTML + response;

        document.getElementById("result_no").value = Number(val) + 10;
      }
    });
  }

</script>

<div id="content">
  <div id="result_para">


  </div>
</div>

<input type="hidden" id="user_id" value="<?php echo $userid;?>">
<input type="hidden" id="result_no" value="15">
<input type="button" id="load" onclick="loadmore()" value="Load More Results">

Answer 1

您可以在loadmore开始时将loading变量设置为true，然后在ajax回调中将其设置回false。 loading应该在loadmore之外声明loadmore （请参见闭包是什么）。

            var loading = false;
            function loadmore()
            {
              if (loading) {
                return ;
              }
              loading = true;
              var val = document.getElementById("result_no").value;
              var userval = document.getElementById("user_id").value;
              $.ajax({
              type: 'post',
              url: 'fetch.php',
              data: {
                getresult:val,
                getuserid:userval
              },
              context: this,
              success: function (response) {
                loading = false;
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML+response;

                document.getElementById("result_no").value = Number(val)+10;
              },
              error: function () {
                loading = false;
              }
              });
            }

除了使用该变量，您还可以通过编程方式禁用/启用按钮，但这意味着如果请求速度很快，您的按钮将闪烁。

Answer 2

您可以通过在第一次单击后禁用按钮来防止这种情况，因此请更改以下行：

         success: function (response) {
            var content = document.getElementById("result_para");
            content.innerHTML = content.innerHTML+response;

            document.getElementById("result_no").value = Number(val)+10;
          }

用这行：

             success: function (response) {
document.getElementById("load").disabled = true;
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML+response;

                document.getElementById("result_no").value = Number(val)+10;
document.getElementById("load").disabled = false;
              }

Answer 3

您可以在单击“加载更多”按钮时禁用该按钮，然后在一段时间后使用javascript函数setTimeout从该按钮中删除禁用的属性。 这意味着第一次单击后将无法单击该按钮，即使ajax请求返回错误，该按钮仍将被单击。

$('#load').click(function {
    // disable the button
    $(this).prop('disabled', true);

    // after three seconds enable the button again
    var timeout = setTimeout(function() { $(this).prop('disabled', false); }, 3000);

});