setInterval 'tripping' 本身并启动第二个间隔计时器

Question

我已经编写了一个选项卡功能，可以在一段时间后在选项卡之间切换，这看起来工作得很好但是，我注意到它有时会中断。

在查看 setInterval 并查看错误本身后，看起来 setInterval 在 20-30 分钟后自行跳闸并启动第二个计时器。这会导致同时显示 2 个标签。

我在网上读了一些内容，基本上它与 Javascript 是单线程有关，这只是 setInterval 的一个基本缺陷，如果它跳闸它不会重置计时器它只是创建了第二个。无论如何要为这次旅行添加错误捕获或更好的方法来运行重复超时功能？

jQuery(document).ready(function() {
    function autoPlayTabs(tabTitle1, tabTitle2, tabTitle3, tabTitle4, tabContent1, tabContent2, tabContent3, tabContent4, tabLength, tabTitleMobile1, tabTitleMobile2, tabTitleMobile3, tabTitleMobile4) {
        var actualTabLength = tabLength * 4;
        var tabContainer = jQuery('.elementor-tabs');
        var allTabs = jQuery('.elementor-tabs .elementor-tabs-wrapper .elementor-tab-title');
        var allContent = jQuery('.elementor-tabs .elementor-tabs-content-wrapper .elementor-tab-content');
        var initialTabTimer = null;
        var tabTimer = null;

        tabTitle1.addClass('active'); tabContent1.addClass('active');

        console.log('Setting initialTabTimer');
        initialTabTimer = setTimeout(function(){
            tabTitle1.removeClass('active'); tabContent1.removeClass('active');
            tabTitle2.addClass('active'); tabContent2.addClass('active');

            console.log("Setting Timeout2");
            setTimeout(function(){
                tabTitle2.removeClass('active'); tabContent2.removeClass('active');
                tabTitle3.addClass('active'); tabContent3.addClass('active');

                console.log("Setting Timeout3");
                setTimeout(function(){
                    tabTitle3.removeClass('active'); tabContent3.removeClass('active');
                    tabTitle4.addClass('active'); tabContent4.addClass('active');
                    console.log("Executing Timeout3 Function");
                }, tabLength);
            }, tabLength);
        }, tabLength);

        console.log("Setting tabTimer");
        tabTimer = setInterval(function(){
            tabTitle4.removeClass('active'); tabContent4.removeClass('active');
            tabTitle1.addClass('active'); tabContent1.addClass('active');

            console.log("Setting TimeoutB");
            setTimeout(function(){
                tabTitle1.removeClass('active'); tabContent1.removeClass('active');
                tabTitle2.addClass('active'); tabContent2.addClass('active');

                console.log("Setting TimeoutC");
                setTimeout(function(){
                    tabTitle2.removeClass('active'); tabContent2.removeClass('active');
                    tabTitle3.addClass('active'); tabContent3.addClass('active');

                    console.log("Setting TimeoutD");
                    setTimeout(function(){
                        tabTitle3.removeClass('active'); tabContent3.removeClass('active');
                        tabTitle4.addClass('active'); tabContent4.addClass('active');
                        console.log("Executing TimeoutD Function");
                    }, tabLength);
                }, tabLength);
            }, tabLength);
        }, actualTabLength);

        allTabs.click(function() {
            if (initialTabTimer !== null) {
               clearTimeout(initialTabTimer);
               initialTabTimer = null;
               console.log("Cleared initialTabTimer");
            }

            if (tabTimer !== null) {
               clearInterval(tabTimer);
               tabTimer = null;
               console.log("Cleared tabTimer");
            } else {
                console.log("Did not need to clear tabTimer");
            }
            
            allTabs.removeClass('active');
            allContent.removeClass('active');
            tabContainer.addClass('tabsManual');
        });
    }

    if(homeTabTitle1.length > 0){
    console.log("Calling AutoPlayTabs Homepage");
    autoPlayTabs(homeTabTitle1,homeTabTitle2,homeTabTitle3,homeTabTitle4,homeTabContent1,homeTabContent2,homeTabContent3,homeTabContent4,homeTabLength);
    }
});

下面是从它调用的每个 setTimeout 的 console.log，从中断到修复自身：

Calling AutoPlayTabs Homepage
Setting initialTabTimer
Setting tabTimer
Setting Timeout2
Setting Timeout3
Executing Timeout3 Function

//This console.log block ran 30 times without error//
Setting TimeoutB
Setting TimeoutC
Setting TimeoutD
Executing TimeoutD Function
//This console.log block ran 30 times without error//

//It Breaks here after a total of 24 minutes//
Setting TimeoutB
Setting TimeoutC
Setting TimeoutD
Setting TimeoutB //For some reason TimeoutB has been fired again
Executing TimeoutD Function

Setting TimeoutC
Setting TimeoutD
Setting TimeoutB
Executing TimeoutD Function

Setting TimeoutC
Setting TimeoutD
Executing TimeoutD Function

//It fixed itself here after 2.4 minutes//

Setting TimeoutB
Setting TimeoutC
Setting TimeoutD
Executing TimeoutD Function

Answer 1

这不是 setTimeout 出错，是 setTimeout 被调用了两次

为了帮助记录这一点，您可以放入 console.logs 以显示每个计时器的启动时间。为简单起见，我也摆脱了所有 class 添加和删除。

我也很好奇 homeTabTitle1 来自哪里 - 你能解释一下吗？

jQuery(document).ready(function() {
  function autoPlayTabs(tabTitle1, tabTitle2, tabTitle3, tabTitle4, tabContent1, tabContent2, tabContent3, tabContent4, tabLength, tabTitleMobile1, tabTitleMobile2, tabTitleMobile3, tabTitleMobile4) {
    var actualTabLength = tabLength * 4;
    var tabContainer = jQuery('.elementor-tabs');
    var allTabs = jQuery('.elementor-tabs .elementor-tabs-wrapper .elementor-tab-title');
    var allContent = jQuery('.elementor-tabs .elementor-tabs-content-wrapper .elementor-tab-content');
    var initialTabTimer = null;
    var tabTimer = null;

    console.log("Setting initialTabTimer")
    initialTabTimer = setTimeout(function() {

      console.log("Setting timer 2")
      setTimeout(function() {

        console.log("Setting timer 3")
        setTimeout(function() {

          console.log("Executing inner function 3")
        }, tabLength);
      }, tabLength);
    }, tabLength);

    console.log("Setting tabTimer")
    tabTimer = setInterval(function() {

      console.log("Setting timber B")
      setTimeout(function() {

        console.log("Setting timber C")
        setTimeout(function() {

          console.log("Setting timber D")
          setTimeout(function() {

            console.log("Executing inner function D")
          }, tabLength);
        }, tabLength);
      }, tabLength);
    }, actualTabLength);

    allTabs.click(function() {
      if (initialTabTimer !== null) {
        clearTimeout(initialTabTimer);
        initialTabTimer = null;
        console.log("Cleared initialTabTimer");
      } else {
        console.log("Did not need to clear initialTabTimer");
      }

      if (tabTimer !== null) {
        clearInterval(tabTimer);
        tabTimer = null;
        console.log("Cleared tabTimer");
      } else {
        console.log("Did not need to clear tabTimer");
      }

    });
  }

  if (homeTabTitle1) {
    console.log("calling AutoPlayTabs")
    autoPlayTabs(homeTabTitle1, homeTabTitle2, homeTabTitle3, homeTabTitle4, homeTabContent1, homeTabContent2, homeTabContent3, homeTabContent4, homeTabLength);
  }
});

为什么文档 ready fire 可能不止一次？

正如此处指出的：

jQuery $(document).ready () fires twice

最常见的原因是 DOM 中的某些操作导致文档重新呈现。回答者提出了解决方案。

为什么有些人调用setTimeout "unreliable"？

我认为它们的意思是您不能依赖当回调函数被调用时。我认为他们不合理地期望 setTimeout 能够在所需时间神奇地导致 Javascript 到运行代码恰好。实际上，当主程序运行没有事情要做时，setTimer 只是将任务放在任务列表中运行。

通常，在网页上，Javascript 解释器在页面最初呈现后几乎没有什么可做的。在这种情况下，setTimeout 回调将在相当准确的时间被调用。

但是，如果网页有很多事情需要Javascript解释器做，需要很多秒甚至几分钟的“思考时间”，比如大量的计算，那么就会出现setTimeout在肤浅的评估中不可靠。不过也不是真的不靠谱，它是在做它应该做的事情，就是延迟回调，直到既有空闲时间，又有足够的时间过去。

如果 Javascript 代码调用异步函数，则可能释放解释器以查看 setTimeout 事件。因此，如果网页准备就绪（从 jQuery 的角度来看）但随后与其他站点进行几秒钟的通信以获取数据库条目等，那么只要这些数据库调用是异步的，setTimeout 就可以触发如果需要它的回调。

setInterval 和 setTimeout 不同

“由于某种原因 timeoutB 再次触发”

原因是它是 setInterval，而不是 setTimeout。那是故意的吗？ setInterval 会不断开火。

Answer 2

如果你只是将你的逻辑简化为只有一个间隔运行，你所有的同步问题都会消失

 const tabs = [
  {title: tabTitle1, content: tabContent1},
  {title: tabTitle2, content: tabContent2},
  {title: tabTitle3, content: tabContent3},
  {title: tabTitle4, content: tabContent4}
 ];
 
 let curr = 0;
 let tab = tabs[curr];
 tab.title.addClass("active");
 tab.content.addClass("active");

 var timerInterval = setInterval(function(){     
        tab.title.removeClass("active");
        tab.content.removeClass("active");
        curr = ++curr % tabs.length;
        tab = tabs[curr];
        tab.title.addClass("active");
        tab.content.addClass("active");
 }, tabLength);

实例

jQuery(document).ready(function() {
  function autoPlayTabs(tabTitle1, tabTitle2, tabTitle3, tabTitle4, tabContent1, tabContent2, tabContent3, tabContent4, tabLength, tabTitleMobile1, tabTitleMobile2, tabTitleMobile3, tabTitleMobile4) {
    var actualTabLength = tabLength * 4;
    var tabContainer = jQuery('.elementor-tabs');
    var allTabs = jQuery('.elementor-tabs .elementor-tabs-wrapper .elementor-tab-title');
    var allContent = jQuery('.elementor-tabs .elementor-tabs-content-wrapper .elementor-tab-content');
    var initialTabTimer = null;
    var tabTimer = null;
    
    const tabs = [
        {title: tabTitle1, content: tabContent1},
      {title: tabTitle2, content: tabContent2},
      {title: tabTitle3, content: tabContent3},
      {title: tabTitle4, content: tabContent4}
     ];
     
     let curr = 0;
     let tab = tabs[curr]
     tab.title.addClass("active")
     tab.content.addClass("active");
     var timerInterval = setInterval(function(){
     
            tab.title.removeClass("active")
            tab.content.removeClass("active");
        curr = ++curr % tabs.length
            tab = tabs[curr]
        tab.title.addClass("active")
            tab.content.addClass("active");
     }, tabLength)
    

    allTabs.click(function() {
      if (initialTabTimer !== null) {
        clearTimeout(initialTabTimer);
        initialTabTimer = null;
      }

      if (tabTimer !== null) {
        clearInterval(tabTimer);
        tabTimer = null;
      }

      allTabs.removeClass('active');
      allContent.removeClass('active');
      tabContainer.addClass('tabsManual');
    });
  }

  if ($("#homeTabTitle1")) {
    autoPlayTabs($("#homeTabTitle1"), $("#homeTabTitle2"), $("#homeTabTitle3"), $("#homeTabTitle4"), $("#homeTabContent1"), $("#homeTabContent2"), $("#homeTabContent3"), $("#homeTabContent4"), 1000);
  }
});

.active { background-color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="homeTabTitle1">
  homeTabTitle1
</div>
<div id="homeTabTitle2">
  homeTabTitle2
</div>
<div id="homeTabTitle3">
  homeTabTitle3
</div>
<div id="homeTabTitle4">
  homeTabTitle4
</div>
<div id="homeTabContent1">
  homeTabContent1
</div>
<div id="homeTabContent2">
  homeTabContent2
</div>
<div id="homeTabContent3">
  homeTabContent3
</div>
<div id="homeTabContent4">
  homeTabContent4
</div>

请注意，我没有连接你的“停止”逻辑，但你需要做的只是 clearInterval(timerInterval) 在你的 click 处理程序中。

Answer 3

根据要求

Could you pop an updated answer of that using setInterval

您可以重构为单个 setInterval()。以下是一个概念 - 如果您的选项卡 而不是 在 HTML 中彼此相邻，那么您可以预先整理它们并循环遍历数组。您还可以使用 data- 属性 link 将您的内容添加到标签页。

这还允许您更改“活动”选项卡（例如通过单击它），并且每次都会“自动播放”到下一个 - 但在这种情况下您可能需要重置计时器。

var interval_time = 250;  // short time for demo

var tabs = $(".tab");

// single setInterval
var timer = setInterval(() => {

  // get the currently active, so no need to store what that was
  var active = tabs.filter(".active");
  active.removeClass("active");

  // get the next tab, if none, then loop back to the first
  var next = active.next(".tab");
  if (next.length == 0)
    next = tabs.first();
  next.addClass("active");

}, interval_time);

$("#stop").click(() => clearInterval(timer))

/* can show / hide
.tab { display:none; }
.tab.active { display:block; }
*/

/* or show all the tabs at once */
.tab { display:inline-block; color: #CCC; }
.tab.active { color: green }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tab active'>tab 1</div>
<div class='tab'>tab 2</div>
<div class='tab'>tab 3</div>
<div class='tab'>tab 4</div>
<br/>
<button type='button' id='stop'>stop</button>

setInterval 'tripping' 本身并启动第二个间隔计时器

setInterval 'tripping' itself and starting a 2nd interval timer

javascript

jquery

setinterval

这不是 setTimeout 出错，是 setTimeout 被调用了两次

为什么文档 ready fire 可能不止一次？

为什么有些人调用setTimeout "unreliable"？

setInterval 和 setTimeout 不同