javascript - jquery延迟文档准备好功能的秒数？

Question

我有一个名为 noti_box 的 div，它会在页面加载时淡入。有时可能只有一个 noti_box div，也可能有 2、3 或 4 个。

用户可以通过单击来关闭此 div。

如果页面上没有显示 noti_boxes，我正在尝试淡入另一个 div，我们称此 div(广告)。

但是，使用我当前的脚本，因为我的第一个 div noti_box 需要几秒钟的时间才能淡入，它将自动显示我的广告 div。应该发生的是，我的广告 div 应该只在用户关闭 div noti_box 后显示，而不是在它在页面上淡入之前显示。

有没有办法可以延迟我的 jquery 函数，直到 noti_box 完成淡入？

noti_box jquery:

<script>
    $('.noti_box').each(function(i) {
    // 'i' stands for index of each element
    $(this).hide().delay(i * 1000).fadeIn(1500);
});
</script>

我的广告 div jquery:

<script type="text/javascript">
$(document).ready(function(){
if ($('.noti_box').is(':hidden')) {
$(".advert").fadeIn("slow");
}
}); </script>

我已经接近我需要的了:

<script>        
$(document).ready(function(){
    var animations = [];

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });
    $.when.apply($, animations).done(function () {
        if ($('.noti_box').is(':visible')===false) {
        $(".advert").fadeIn("slow");
    }});
});
</script>

通过使用此脚本，我的 noti_boxes 会淡入，如果我在淡入后 1 秒内关闭它们，那么我的广告框就会淡入。但是，如果我在 1 秒后等待，然后我关闭 noti_boxes，我的广告就不会淡入根本不。有什么想法吗？

Answer 1

由于您知道元素的数量以及每个元素淡入淡出所需的时间，因此您可以计算广告显示所需的总延迟，如下所示:

// number of elements * their delay + fade time
var totalDelay = ($('.noti_box').length - 1) * 1000 + 1500; 
$(document).ready(function(){
  setTimeout(function(){
    $(".advert").fadeIn("slow");
  }, totalDelay);
}); 

<小时/>

这是一个包含 5 个通知框的示例(可以是任意数量):

$('.noti_box').each(function(i) {
  // 'i' stands for index of each element
  $(this).hide().delay(i * 1000).fadeIn(1500);
});

// number of elements * their delay + fade time
var totalDelay = ($('.noti_box').length - 1) * 1000 + 1500;
$(document).ready(function() {
  setTimeout(function() {
    $(".advert").fadeIn("slow");
  }, totalDelay);
});

.advert {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noti_box">1</div>
<div class="noti_box">2</div>
<div class="noti_box">3</div>
<div class="noti_box">4</div>
<div class="noti_box">5</div>
<div class="advert">ADVERT</div>