Question

我已经加载了更多＆＃34;按钮，如果我足够快地点击它，它会加载相同的内容两次，我想阻止它。

这是我用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的开头将loadmore变量设置为true，并在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;
              }
              });
            }

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

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);

});

防止来自ajax的多个请求

3 个答案: