看不到我正在做的inf循環

Question

對於學校作業，我必須制作一個jQuery插件。 我幾乎完成了，但是由於某種原因我真的看不到，當我嘗試提交表單時，我最終陷入了無限循環（這會導致Google Chrome瀏覽器崩潰）。 這是代碼：

console.log("starting plugin");
$(document).ready(init);

function init() {
    $('#password').on('keyup', clickHandler);
}
function clickHandler() {
    console.log("clickHandler");
    $.fn.passwordCheck();

}
(function () {
    var settings = {
        passwordInput: $('input[type="password"]'),
        passwordNeededLength: 8,
        passwordStrenght: 2,
        errorMessageLoc: 'passwordinfomessage',
        messageLoc: '#passinfo'
    };
    var methods = {
        init: function () {
            console.log("started methods init");
            methods.checkStrength();
        },
        createMessages: function (status) {
            console.log("start function createmessages");
            var $messageLoc = $(settings.messageLoc);
            var $errormessage = settings.errorMessageLoc;
            $($messageLoc).css("display","inline-block");
            if (status === 1) {
                $("#passinfo").empty();
                $messageLoc.append("<p id='passwordLength' class=" + $errormessage + ">the password needs to be atleast " + settings.passwordNeededLength + " characters</p>");
                console.log("created message #1");
            } else if (status === 2) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='weak' class=" + $errormessage + ">The password is to weak to be accepted, please try adding some characters</p>");
                console.log("created message #2");
            } else if (status === 3) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='good' class=" + $errormessage + ">The password is the password is of good strength, u can try adding some numbers and capital letters</p>");
                console.log("created message #3");
            } else if (status === 4) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='strong' class=" + $errormessage + ">The password is strong</p>");
                console.log("created message #4");
            } else if (status === 5) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='submitButtonMessage' class=" + $errormessage + ">Something is wrong with your password</p>");
                console.log("created message #5");
            }
        },
        checkStrength: function () {
            console.log("start function checkStrength");
            var strength = 0;
            if (settings.passwordInput.val().length >= settings.passwordNeededLength) {
                strength += 1;
                console.log("password length is accept");
                if (settings.passwordInput.val().length >= 25) strength += 2;

                if (settings.passwordInput.val().match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1;

                if (settings.passwordInput.val().match(/([a-zA-Z])/) && settings.passwordInput.val().match(/([0-9])/))  strength += 1;

                if (settings.passwordInput.val().match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1;

                if (settings.passwordInput.val().match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;

                methods.checkStrengthResult(strength);
            }
            else {
                console.log(settings.passwordInput.val().length);
                console.log("not big");
                if (settings.passwordInput.val() == 0) {
                    console.log("just entered the site");

                } else {
                    $('.' + settings.errorMessageLoc).remove();
                    methods.createMessages(1);
                }
            }
        },
        checkStrengthResult: function (strength) {
            console.log("start function checkStrengthResult");
            console.log(strength);
            //if value is less than 2
            if (strength < 2) {
                console.log("password is to weak");
                methods.createMessages(2);
            }
            if (strength == 2) {
                console.log("password is good");
                methods.createMessages(3);
            }
            if (strength > 3) {
                console.log("password is strong");
                methods.createMessages(4);
                methods.checkPasswordStrength(strength)
            }
        }
        ,
        checkPasswordStrength: function (strength) {
            $( "#testform" ).submit(function( event ) {
                console.log( "Handler for .submit() called." );
                if (strength >= settings.passwordStrenght&& settings.passwordInput.val().length >= settings.passwordNeededLength){
                    console.log("is good");
                    console.log("i will submit");
                    $( "#testform" ).submit();
                    event.preventDefault();

                } else{
                    console.log("not good");
                    event.preventDefault();
                    methods.init();
                }
            });

//            console.log("stopt posting");
//            if (typeof strength == 'undefined'|| strength == 0) {
//                event.preventDefault();
//                console.log("strength was undifined");
//                methods.init()
//            } else {
//                if (strength >= settings.passwordStrenght&& settings.passwordInput.val().length >= settings.passwordNeededLength) {
//                    console.log("password is strong enhough");
//                    event.preventDefault();
//                } else {
//                    console.log("stoping submitting");
////                  console.log(strength);
//                    event.preventDefault();
//                    methods.createMessages(5);
//
//                }
//            }
////        }
        }
    };
    $.fn.passwordCheck = function (options) {
        console.log("start password check");
        if (options) {
            settings = $.extend(settings, options);
            console.log(options);
            console.log(settings);
        }

        $('#password').on('keyup', methods.init());
        $('#submitbutton').on('click', methods.checkPasswordStrength());

        return this;
    };
})(jQuery);

在最后一種方法中，我之前嘗試過一些方法，但沒有得到該方法的幫助。

Answer 1

您必須要提交，然后再在處理程序中再次提交表單。

更改

$( "#testform" ).submit();

至

$( "#testform" )[0].submit();

這將執行本機表單提交，而不是再次觸發Submit事件。

Answer 2

我不認為這是一個無限循環，我認為這是您的代碼附加了大量事件處理程序，並且您的瀏覽器在嘗試處理所有這些事件時崩潰了。

我建議您獲取一些論文並確定代碼執行的位置。 它僅應將給定類型的事件附加到給定元素一次 。 如果這樣做不止一次，那么您幾乎肯定會遇到問題！

---

編輯：閱讀湯姆的答案，確實存在無限循環！ 當表單有效時，您不應阻止默認事件處理程序。 僅當您要停止提交表單時，才應調用e.preventDefault() 。