WordPress – 防止用户在登录页面重复点击登录按钮造成重复登录

1 WordPress防止用户在登录页面重复点击登录按钮

因为在之前在用户登录钩子wp_login中增加了当用户登录时会发送通知邮件给我，这就造成了登录时会发送邮件，最终导致登录的时间的比较长。有些用户在点击登录按钮之后因为长时间没有登录成功，误以为没有点击到登录按钮，所以会重复点击登录按钮造成重复登录。

为了解决这一问题，决定在登录页面当用户重复点击登录按钮时弹出提示框告知用户耐心等待，直接在主题的function.php中加入以下代码即可：

add_action( 'login_form', 'stubbornhuang_prevent_repeated_click_login_button' );
function stubbornhuang_prevent_repeated_click_login_button(){
?>
    <script>
        function isEmpty(obj)
        {
            for(let key in obj){
                return false;
            }
            return true;
        }

        var is_can_click = true;
        window.onload=function(){
            var wp_submit = document.getElementById("wp-submit");
            if(!isEmpty(wp_submit))
            {
                wp_submit.onclick = function () {
                    if(is_can_click)
                    {
                        is_can_click = false;
                        setTimeout(function() {
                            is_can_click = true;
                        }, 1000);//一秒内不能重复点击
                    }
                    else
                    {
                        alert("请不要重复点击登录按钮，耐心等待登录成功！");
                    }
                }
            }
        }
    </script>
<?php
}

上述代码直接使用login_form钩子在页面中嵌入js脚本，在js脚本中获取登录提交按钮，增加该按钮的点击响应逻辑，在一秒钟之内不能重复点击按钮，如果重复点击了则弹出提示。