首页新闻找找看学习计划

关于防止用户快速点击按钮,多次发送请求问题

0
悬赏园豆:10 [已解决问题] 解决于 2017-08-28 09:13

问题: 用户多次点击按钮,会发送多多个请求给后台,怎么样做只让一个请求发送过去;

我网上看了很多文章,不知什么样的bug少一点,有的根本看不懂,我简单做了一个demo,采用禁用按钮的方法;

点击后让按钮disabled,文字变为加载中;请求成功后移除disabled属性,恢复文字;这个逻辑有问题吗?我感觉考虑的不全,比如请求error时的处理,请求stop时的处理,是不是都要让按钮状态恢复一下?求指点

  <button id="button">Click !</button>
  <script type="text/javascript">
    $("#button").on("click", function(){
      $(this).attr("disabled",true);
      $(this).html("加载中...")
      $.ajax({
        url:"./fastClick.php",
        success: function(res){
          console.log(res);
          $("#button").html("Click !")
          $("#button").removeAttr("disabled");
        }
      })
    })
  </script>

_只影向谁去的主页 _只影向谁去 | 初学一级 | 园豆:51
提问于:2017-08-25 11:02
< >
分享
最佳答案
0
$(function () {
            $.ajax({
                url: 'http://www.baidu.com'
            }).always(function () {
                console.log('always');
            });
        });

 

 

可以在always中处理这类事情

收获园豆:10
写代码的小2B | 老鸟四级 |园豆:4346 | 2017-08-25 11:20

对于防止用户多次点击的方法,请问有什么建议吗,或者推荐的方法?

_只影向谁去 | 园豆:51 (初学一级) | 2017-08-25 11:27

@_只影向谁去: 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function () {
            var $btnSend = $('#btnSend');
            $btnSend.click(function () {
                $btnSend.attr('disabled', 'disabled');
                $.ajax({
                    url: 'http://www.baidu.com'
                }).always(function () {
                    //模拟请求延时
                    setTimeout(function () {
                        $btnSend.removeAttr('disabled');
                    }, 1000 * 2);
                });
            });
        });
    </script>
</head>
<body>
    <button id="btnSend">发送请求</button>
</body>
</html>

因为always始终会执行,所以说在always中恢复按钮的状态,就不用分别在error或者success里面来恢复。

写代码的小2B | 园豆:4346 (老鸟四级) | 2017-08-25 11:36
其他回答(1)
0

楼上已经告诉你了啊

Vincent8464 | 园豆:41 (初学一级) | 2017-08-25 16:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册