preventing double clicks on button with ajax call

2019-05-26 18:37发布

站内问答 / JavaScript
1079 4 4

I noticed my users sometimes click the buttons twice, maybe no one told them one click is enough.

What's the best way to prevent the double-click? I basically hide the button and show a "loading" gif, but that apparently is not enough...

4条回答
爷的心禁止访问
2楼-- · 2019-05-26 18:54

I just found out the jQuery funcion .one(), that may be useful great for this kind of purpose! great!

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
3楼-- · 2019-05-26 18:55

Another example using a flag

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>test dbl click</title>
    </head>
    <body>
        <button id="btn1">Click Away</button>
        <div id="out"></div>
        <script type="text/javascript">

            function addMessage( msg ){
                document.getElementById("out").innerHTML += (new Date().toTimeString()) + " : " + msg + "<br/><br/>";
            }

            function singleClick(){
                addMessage( "single");
            }

            function addDoubleClickProtection( element, fncToCall ){            
                var isClicked = false;
                var timer = null;
                element.onclick = function(){
                    if(!isClicked){
                        isClicked = true;
                        timer = window.setTimeout( function(){ isClicked = false; }, 200);  
                        return fncToCall();
                    }
                }
            }

            addDoubleClickProtection( document.getElementById("btn1"), singleClick );

        </script>
    </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
淡お忘
4楼-- · 2019-05-26 19:06

Usually disabling/hiding/replacing the button should work. If they are real fast, try setting a variable to false when your script starts, return if it's true, set it to true after the first click. 

var alReadyClicked = false;
function click(){
 if (alreadyClicked) 
  return false;
 alreadyClicked = true;
}

Don't forget to set it to false when the user can click again.

查看更多
0人赞 添加讨论(0) 举报
Bombasti
5楼-- · 2019-05-26 19:17

If they are clicking fast enough to fire the double click event, return false.

ondblclick="return false"

EDIT: This will not cancel the single click event so problem would still exist.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)