我正在使用JavaScript（Jquery）尝试按顺序运行某些操作。在我的实际代码中，我有一个我在.ready()上运行的函数来启动一些变量。作为此流程的一部分，我从本地存储中读取了一些数据，以删除在之前访问中删除的元素。我删除的元素应用了css过渡类。当页面首次加载时，我不希望这些动画发生，因此我要求<body>元素在我的CSS中应用class="fully-loaded"以便过渡到工作状态。我只是在知道所有添加内容并且其他所有内容都已加载后才尝试添加fully-loaded类。我尝试使用队列等设置多个.ready()语句，以便控制顺序或执行。
虽然我认为我按顺序运行，但在运行脚本添加fully-loaded类之前，启动函数似乎并不完整。我正在粘贴我的代码的迷你版本，它表现出同样的问题。 我的问题是：在运行init()来电之前，如何确保在启动功能addClass中完成的任何操作已完成？
<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>
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 };
})();
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()开始的所有操作都以一般方式完成？