JQ - tab栏切换内容 —— setinerval定时器

(function() {
    $(".filter").on("click", "a", function() {
       index = $(this).index()
      $(this).addClass("active").siblings("a").removeClass("active");
      // 选取对应的索引号的内容
      $(".order .data").eq($(this).index()).show().siblings(".data").hide();
    });
    // filter tab自动切换
    // 开启定时器 自动让a 触发点击事件
    var as = $(".order .filter a");
    console.log(as);
    var index = 0;
    var timer = setInterval(function() {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click();
    },1000);

    // 当鼠标经过   关闭定时器 ，离开时重启定时器
    $(".order").hover(
        function() { clearInterval(timer) },
        function() {
            clearInterval(timer);
            timer = setInterval(function() {
                index++;
                if (index >= 4) index = 0;
                as.eq(index).click();
            },1000);
        }
    )

})();

   <!-- 订单 -->
          <div class="order pannel">
            <div class="inner">
              <!-- 筛选 -->
              <div class="filter">
                <a href="javascript:;" class="active">365天</a>
                <a href="javascript:;">90天</a>
                <a href="javascript:;">30天</a>
                <a href="javascript:;">24小时</a>
              </div>
              <!-- 数据 -->
              <div class="data" style="display: block;">
                <div class="item">
                  <h4>20,301,987</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>99834</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
              <!-- 2 -->
              <div class="data" >
                <div class="item">
                  <h4>30,200,987</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>96983</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
              <!-- 3 -->
              <div class="data" >
                <div class="item">
                  <h4>20,301,987</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>83455</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
               <!-- 4 -->
               <div class="data" >
                <div class="item">
                  <h4>40,987,301</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>66834</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
            </div>
          </div>

/* 订单模块制作 */
.order {
  height: 1.875rem;
  /* overflow: hidden; */
}
.order .filter {
  display: flex;
}
.order .filter a {
  display: block;
  height: 0.225rem;
  line-height: 1;
  padding: 0 0.225rem;
  color: #1950c4;
  font-size: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}
.order .filter a:first-child {
  padding-left: 0;
}
.order .filter a:last-child {
  border-right: none;
}
.order .filter a.active {
  color: #fff;
  font-size: 0.25rem;
}
.order .data {
  /* display: flex; */
  
  margin-top: 0.25rem;
  display: none;
}
.order .item {
  float: left;
  width: 50%;
}
.order h4 {
  font-size: 0.35rem;
  color: #fff;
  margin-bottom: 0.125rem;
}
.order span {
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
}