-4

私たちの Web サイトで最も奇妙な動作が発生しており、動作が非常に遅くなっています。

私のチームと私は、完全に AJAX で実行されている Web サイトを持っています。したがって、ログインのために、ログイン ボックスをインデックス ページにロードする js ajax がいくつかあります。ログイン ボックスを含む html には、head にスクリプト リンクがあります。このスクリプトは、ログイン フォームの送信をリッスンし、ajax を介して認証のためにフォーム データをサーバーに送信します。

ログイン ボックスを含む html は 1 回だけ読み込まれますが、リンク先の js ファイルは複数回読み込まれます。回数が変わります。5回から15回で模様も何も見えない。これは、ログイン時だけでなく、サイトのあらゆる場所で発生します。

この問題は本当に私を困惑させ、私は完全に立ち往生しています。最初にajaxでロードされたjsファイルにajaxがあるからですか？

あなたの洞察と助けに本当に感謝します！

編集：

要求に応じて、いくつかのコード:

これは、Interface.js ファイルの loadContent() の機能を取り除いたバージョンです。この特定の関数は、すべてのサイト コンテンツを index.php のコンテンツ領域にロードします。ページが更新されると、関数に最初に送信されるのは、ログイン ボックスを含む login.php ファイルの場所です。

loadContent: function(page) {

var self = this;


//just some animations to make things look good
$(self.error).fadeOut(150, function() {
    $(self.content).fadeOut(150, function() {
        $(self.loading).fadeIn(150, function() {
            $.ajax({
                url: page,
                success: function(data) {                            
                    //response data
                    var $response = $(data);                         

                    $(self.content_1).html($response);                    

                    //definitions for contentbox-2
                    self.contentHeading_2.html("Replies:");                           
                    self.content_2.html(postReplies);

                    //redisplay the  content after it has loaded in.
                    $(self.loading).fadeOut(150, function() {
                        $(self.content).fadeIn(150, function() {
                            // Content faded in
                        });
                    });
                },
                error: function() {
                    $(self.loading).fadeOut(150, function() {
                        $(self.error).fadeIn(150, function() {
                            // Error faded in
                        });
                    });
                }
            });
        });
    });
});

this.page = page;
}

そして login.php ファイル:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/login.js"></script>        
    </head>
    <body>
        <div class="padded loginphp">
            <div id="loginbox">
                <!-- the login box comes here
            </div> <!-- #loginbox -->

        </div>
    </body>
</html>

そして login.js ファイル:

$(document).ready(function() {  
    $('#honeyloginform').submit(function(event) {
        //event.preventDefault();
        login();
        return false;
    });
});

function login() {
    $('.errorinputfields').removeClass('errorinputfields');
    if (isEmpty($('#username'))) {
        $('#username').addClass('errorinputfields');
        $('#username').focus();
        return;
    }
    if (isEmpty($('#password'))) {
        $('#password').addClass('errorinputfields');
        $('#password').focus();
        return;
    }
    $('#honeyloginform').fadeOut(100, function(){
        $('#loginbox .loading').fadeIn(300, function(){                                         
            var pword = $('#password').val();
            var remember = "no";
            if ($('#remember').is(':checked')) {
                remember = "yes";
            }
            var JSONobj = {
                username: $('#username').val(),
                password: pword,
                rem: remember
            };
            $.ajax({
                url: 'ajax/login.php',
                data: JSONobj,
                success: function(data) {
                    //alert(data);
                    var JSONobj = JSON.parse(data);
                    if (JSONobj.Success) {
                        Interface.login(); //just loads the landing page after login
                        //window.setTimeout('location.reload()', 300);
                    } else {
                        $('#loginbox .loading').fadeOut(300,function(){
                            $('#honeyloginform').fadeIn(300);
                        });
                        $('#username').focus();
                        $('#loading-message').text(JSONobj.Message).show();                         
                    }
                }
            });                         
        });    
    });
}
4

1 に答える 1

0

私はなんとか問題を見つけて修正しました！

インターフェイスのレイアウトを変更した結果、3 つのセレクター、、、$(self.error)および$(self.content)それぞれ$(self.loading)に複数の要素が含まれるようになりました。

これにより、最終的なコールバック内のすべてloadContent()が 9 回呼び出されたため、コールバック関数が複合されたり、何かが発生したりするようです。

したがって、セレクターを再定義して、それぞれが 1 つの要素を参照するようにするという単純なケースでした。

于 2012-10-19T00:08:24.423 に答える