时间戳

首页 > 解决方案 > 点击时停止 setInterval

jquery - 点击时停止 setInterval

问题描述

我有这个功能可以通过标签循环：

function CycleTabs() {
  //cache a reference to the tabs
  var tabs = jQuery('.shapedo-tabs .single-tab');
  //auto-rotate every 5 seconds
  setInterval(function() {
    //get currently-on tab
    var onTab = tabs.filter('.activetab');
    //click either next tab, if exists, else first one
    var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
    nextTab.addClass("activetab");
    jQuery(".single-tab").not(nextTab).removeClass("activetab");
    var forTabCycle = jQuery(nextTab).attr("for");
    jQuery(".stab-content#" + forTabCycle).addClass("activecontent");
    jQuery(".stab-content").not("#" + forTabCycle).removeClass("activecontent");
  }, 5000);
}

CycleTabs();

当用户单击选项卡时，我还有一个函数：

  jQuery(".single-tab").click(function() {
    var forTab = jQuery(this).attr("for");
    jQuery(this).addClass("activetab");
    jQuery(".single-tab").not(this).removeClass("activetab");
    jQuery(".stab-content#" + forTab).addClass("activecontent");
    jQuery(".stab-content").not("#" + forTab).removeClass("activecontent");
  });

当用户单击选项卡时，如何使循环停止？例如-一旦用户单击选项卡，我就需要循环停止。

标签： jquery

解决方案

您可以设置一个计时器变量，然后使用该变量清除间隔。

    var cycle_timer;

    function CycleTabs() {
      //cache a reference to the tabs
      var tabs = jQuery('.shapedo-tabs .single-tab');
      //auto-rotate every 5 seconds
      cycle_timer = setInterval(function() {
        //get currently-on tab
        var onTab = tabs.filter('.activetab');
        //click either next tab, if exists, else first one
        var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
        nextTab.addClass("activetab");
        jQuery(".single-tab").not(nextTab).removeClass("activetab");
        var forTabCycle = jQuery(nextTab).attr("for");
        jQuery(".stab-content#" + forTabCycle).addClass("activecontent");
        jQuery(".stab-content").not("#" + forTabCycle).removeClass("activecontent");
      }, 5000);
    }

    CycleTabs();

      jQuery(".single-tab").click(function() {
        var forTab = jQuery(this).attr("for");
        jQuery(this).addClass("activetab");
        jQuery(".single-tab").not(this).removeClass("activetab");
        jQuery(".stab-content#" + forTab).addClass("activecontent");
        jQuery(".stab-content").not("#" + forTab).removeClass("activecontent");
        clearInterval(cycle_timer);
      });

推荐阅读