большая форма или JavaScript блокирует браузер - PullRequest
1 голос
/ 20 января 2012

У меня есть HTML-форма с примерно 105 полями, которая включает в себя некоторые действия JavaScript:

1) развернуть / свернуть разделы

http://www.adipalaz.com/experiments/jquery/nested_accordion.html

2) Выбор даты

3) Функция автосохранения

<script type="text/javascript">
    function counter() {
    email = document.getElementById("applicant-email").value;
        if (email.match(emregex) || cd == cdLength){
            if (email.match(emregex)){
            document.getElementById("countdown").innerHTML = left + cd-- + right + button;
            if (cd < 0){
                formAutosave();
            }
            }else{
                document.getElementById("countdown").innerHTML = "Enter your email address for AutoSave <a onclick=\"javascript:alert(\'Please enter an email address\');\"><span><b></b>Save Now</span></a>";
            }
        }
    };
    function formAutosave() {
        window.clearInterval(timer);
    email = document.getElementById("applicant-email").value;
        if (email.match(emregex)){
            document.getElementById("countdown").innerHTML = \'<a><span><b></b>Saving ...</span></a>\';
            var values = "";
    for (var i = 0; i < userForm.length; i++) {
        if (userForm.elements[i].value != null) {
            if (userForm.elements[i].name == "form[autosave]") {
            userForm.elements[i].value = "TRUE";
                    }
                    if (userForm.elements[i].id == "'.$fieldId.'"){
            userForm.elements[i].value = email;
        }
        if (userForm.elements[i].id != "finished"){
            values += userForm.elements[i].name + "=" + encodeURI(userForm.elements[i].value) + "&";
                    }
            }
        }
            values = values.substring(0, values.length - 1);
            jQuery.post(                 
                "http://'.$_SERVER['SERVER_NAME'].
                    $uri.strstr($uri,'?')?'&':'?').'autosave=1&format=raw",
        values,
        function (submissionId){
            if (parseInt(submissionId) > 0){
                jQuery("#continue").val(parseInt(submissionId));
            }
                        cd = cdLength;
            timer = window.setInterval("counter()", 1000);
                    }
                );
            };
        };

    var userForm = document.getElementById("userForm");
        var emregex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        cdLength = '.self::SAVEINTERVAL.';

    var left = \'Automatically saving in \';
    var cd = cdLength;
    var right = \' seconds or \';
    var button = \'<a onclick="javascript: formAutosave();"><span><b></b>Save Now</span></a>\';

        jQuery("#applicant-email").val(jQuery("#'.$fieldId.'").val());
    var timer = window.setInterval("counter()", 1000);

;

Мы записали 3 тестовых видео (Chrome, Firefox, IE9), в каждом из которых наблюдается заметное замедление с использованием раскрывающихся списков в форме, даже если пользователь не использовал развертывание / свертывание или выбор даты. Итак, я ожидаю, что мы вызываем блокировку или утечку памяти в процедуре автосохранения.

Буду признателен за рекомендации по рефакторингу.

1 Ответ

0 голосов
/ 24 января 2012

Замечания выше - это здорово, и я бы порекомендовал следовать советам @Adam и @Alex (вместо этого передайте именованную функцию). Кроме того, вы можете попытаться реализовать немного по-другому (то есть шаблон проектирования модуля или некоторые другие лучшие практики). Посмотрите на этот вопрос StackOverflow: https://stackoverflow.com/questions/4840420/recommended-javascript-annotated-source-code-for-learning

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...