preventing double clicks on button with ajax call

2019-05-26 18:54发布

问题:

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...

回答1:

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.



回答2:

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.



回答3:

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



回答4:

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>