jquery是否将文档就绪功能延迟了几秒？

Question

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

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

然而，对于我当前的脚本，因为我的第一个div noti_box需要几秒钟才能淡入，所以它会自动显示我的广告div。应该发生的是，我的advert div应该只在用户关闭div 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>

然而，如果我等待了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盒子的例子(可以是任何数字)：

​

$('.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>

​

Answer 2

尝试将document.ready放入Javascript SetTimeout函数中。

Answer 3

我找到了我的问题的答案，我为我的最后一个函数设置了一个时间间隔，使其每秒重复一次。

<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 () {
        time=setInterval(function(){
        if ( $('.noti_box:visible').length === 0 ) {
            $(".advert").fadeIn("slow");
        } },1000);
    });
});
</script>