0

JavaScript (Jquery) を使用して、いくつかの操作を順番に実行しようとしています。私の実際のコードでは、.ready()いくつかの変数を開始するために実行する関数があります。このフローの一環として、ローカル ストレージからいくつかのデータを読み込んで、前回の訪問で削除された要素を削除しました。削除する要素には、css トランジション クラスが適用されています。ページが最初に読み込まれるときに、これらのアニメーションを発生させたくないので、トランジションが機能するように<body>要素がclass="fully-loaded"CSS に適用されている必要があります。fully-loadedすべての追加内容を把握し、他のすべてがロードされた後でのみ、クラスを追加しようとしています。.ready()順序や実行を制御するために、キューなどを使用して複数のステートメントを設定しようとしました。

正常に動作していると思いますが、スクリプトを実行してfully-loadedクラスを追加する前に開始機能が完了していないようです。同じ問題を示すコードのミニ バージョンを貼り付けています。私の質問は次のとおりです。呼び出しinit()を実行する前に、開始関数の一部として実行されるものを確実に完了するにはどうすればよいですか?addClass

HTML 本文:

<body>
<section id="secA">    <p>Sec A</p>    </section>
<section id="secB">    <p>Sec B</p>    </section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script>
//$(document).ready(    Tester.init()   );
//$(document).ready(    $("body").addClass('fully-loaded')  );

//$(document).ready(    Tester.init()   );
$.when(Tester.init()).done(function(){
    $("body").addClass('fully-loaded');
    console.log("Desired Order: 4");
});
</script>    

</body>

別のファイルの JavaScript

var Tester = (function() {

    function init() {
        initEvents();
    }

    function initEvents(){       
        console.log("Desired Order: 1");
        setTimeout(
            '$("#secA").remove(); console.log("Desired Order: 2");',
            2000
        );
        console.log("Desired Order: 3");      
    }

    return { init : init };    
})();

CSSコード

section {   width:200px;   height:200px;     position:absolute;}

#secA   {   background-color:green;     }
#secB   {   background-color:red;       }

section:nth-of-type(1)      {   top: 0;     left: 0;    }
section:nth-of-type(2)      {   top: 0;     left: 50%;  }

.fully-loaded section {
    -webkit-transition: all 2.5s ease-in-out;
    -moz-transition: all 2.5s ease-in-out;
    transition: all 2.5s ease-in-out; 
}

私の実際のコードでは、setTimeout のように非同期で少し時間がかかるものがあると思います。目的のアクション: 4が目的のアクションの前に発生: 2一般的な方法で開始したすべての処理が完了する$("body").addClass('fully-loaded');まで待機するにはどうすればよいですか?Tester.init()

4

0 に答える 0