Javascript setInterval 需要很长时间才能重置

Javascript setInterval taking too long to reset

本文关键字：长时间 setInterval Javascript      更新时间：2023-09-26

嘿，我有一个面板（br_Panel），其中包含四个div，类为"smallPanel"和id br_Panel1，br_Panel2等，它们大小相同且相等，并且位置相互重叠。当函数运行时，每 5 秒就会淡出一个并显示下面的一个，当它们全部淡出时，它们都会随着淡入而返回。问题是最后一个div 的淡出和所有div 的淡入之间的暂停是 15 秒，是每个div 离开所需时间的三倍。如何将此重置时间暂停减少到 5 秒？

setInterval(function() {
    if(i < 0) {
        $('#br_Panel').find($('.smallPanel')).fadeIn();
        i = 5;
    }
    else
        i--;
    $('#br_Panel').find($('#br_Panel' + i)).fadeOut();
}, 5000);

这是 html（如果有帮助，每个最里面的div 都绝对定位为 #br_Panel，以便它们相互重叠）：

<div class="height1 panel" id="br_Panel">
    <div class="smallPanel" id="br_Panel1">content</div>
    <div class="smallPanel" id="br_Panel2">content</div>
    <div class="smallPanel" id="br_Panel3">content</div>
    <div class="smallPanel" id="br_Panel4">content</div>
</div>

您提到您的br_Panel包含四个带有 smallPanel 类的div，但是您的间隔函数将在重置之前运行六次i（5、4、3、2、1、0）。 可能是您的函数运行的次数比所需多 2 次，这会导致您的延迟比应有的时间长 10 秒。

另外，当使用 .find（） 时，你只需要传入你正在使用的字符串 css 选择器，而不是输入 jQuery 对象：

$('#br_Panel').find('.smallPanel').fadeIn();
相关文章：