防止来自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

您可以loading在 开始时将变量设置为 true loadmore，然后在 ajax 回调中将其设置回 false。loading应该在外面声明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;
              }
              });
            }

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