滑块工作但延迟

Question

我的滑块有问题。当我加载我的网站时，它运行良好，但是当我在浏览器中转到另一个选项卡并返回滑块时，但延迟。

这就是它的开头：Before

这是一段时间之后的样子，只需更改浏览器中的标签，此延迟就会显示after

我不知道为什么会发生，这里是代码片段：

let box = document.getElementById('slider-img');
let sliders = ['url("http://lorempixel.com/800/400/")', 'url("http://lorempixel.com/801/400/")', 'url("http://lorempixel.com/802/400/")', 'url("http://lorempixel.com/803/400/")', 'url("http://lorempixel.com/804/400/")'];
let i = 0;
let navs = document.getElementsByClassName("slider-nav-button");
let left = document.querySelector(".slider-descript-left");
let leftText = ["Project One", "Project Two", "Project Three", "Project Four", "Project Five"]
let right = document.querySelector(".slider-descript-right");
let rightSource = ["link do 1", "link do 2", "link do 3", "link do 4", "link do 5"]
let rightView = ["link do 1", "link do 2", "link do 3", "link do 4", "link do 5"]
let links = right.querySelectorAll("a");

function show() {
  if (i > 0) {
    navs[i - 1].classList.toggle("inner-slider-nav-button");

  } else if (navs[sliders.length - 1].classList.contains("inner-slider-nav-button")) {
    navs[sliders.length - 1].classList.toggle("inner-slider-nav-button");

  }

  box.style.backgroundImage = sliders[i];
  left.querySelector("h2").textContent = leftText[i];
  links[0].href = rightView[i];
  links[1].href = rightSource[i];
  navs[i].classList.toggle("inner-slider-nav-button");

  if (i < sliders.length - 1) {

    i++;


  } else {
    i = 0;

  }

  setTimeout("show()", 4000);

}
show();

/* line 108, ../sass/style.scss */

.slider-sec {
  width: 100%;
  height: auto;
  background-color: #020202;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/* line 117, ../sass/style.scss */

.slider-sec .slider-line {
  width: 1px;
  height: 60px;
  background-color: #7e27fc;
}


/* line 122, ../sass/style.scss */

.slider-sec .slider-line-text {
  color: #7e27fc;
  position: relative;
  top: 10px;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Roboto", serif;
  font-weight: bolder;
}


/* line 133, ../sass/style.scss */

#slider-img {
  animation: ease-in-out slide 4s infinite;
  background-position: center;
  background-size: cover;
  width: 820px;
  height: 480px;
  overflow: hidden;
}


/* line 142, ../sass/style.scss */

.slider-box {
  margin-top: 30px;
  display: flex;
  align-items: center;
}


/* line 149, ../sass/style.scss */

.slider-box .slider-descript-left {
  width: 0;
  position: relative;
  z-index: 9999999;
  top: 16px;
  right: 60px;
  border-left: 2px #7e27fc solid;
  align-self: flex-start;
}


/* line 158, ../sass/style.scss */

.slider-box .slider-descript-left h6 {
  margin-left: 5px;
  position: relative;
  top: 55px;
  font-size: 8px;
  text-transform: uppercase;
  color: #7e27fc;
}


/* line 167, ../sass/style.scss */

.slider-box .slider-descript-left h2 {
  margin-left: 3px;
  position: relative;
  top: 45px;
  white-space: nowrap;
  color: #dbdbdb;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=11, Direction=0, Color=#000000)";
  text-shadow: 0 0 11px #000000;
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=11, Direction=135, Color=#000000);
}


/* line 179, ../sass/style.scss */

.slider-box .slider-descript-right {
  padding-bottom: 35px;
  border-left: 2px #7e27fc solid;
  align-self: flex-end;
  position: relative;
  right: 30px;
  bottom: 16px;
}


/* line 187, ../sass/style.scss */

.slider-box .slider-descript-right h6 {
  position: relative;
  bottom: 32px;
  right: 3px;
  white-space: nowrap;
  font-size: 8px;
  text-transform: uppercase;
  color: #7e27fc;
}


/* line 197, ../sass/style.scss */

.slider-box .slider-descript-right a {
  text-decoration: none;
  color: #dbdbdb;
}


/* line 202, ../sass/style.scss */

.slider-box .slider-descript-right .fa {
  margin-left: 3px;
}


/* line 208, ../sass/style.scss */

.slider-nav {
  padding-bottom: 50px;
  position: relative;
  right: 30px;
}


/* line 214, ../sass/style.scss */

.slider-nav-button {
  display: inline-block;
  height: 3px;
  width: 35px;
  margin: 0 10px;
  background-color: #989898;
}


/* line 222, ../sass/style.scss */

.inner-slider-nav-button {
  background-color: #7e27fc;
  box-shadow: 0 0 3px #7e27fc;
}

@keyframes slide {
  0%,
  100% {
    opacity: 0;
  }
  40%,
  95% {
    opacity: 1;
  }
}

<article class="slider-sec">
  <div class="slider-line">
  </div>
  <div class="slider-line-text">
    <p>Look My Projects</p>
  </div>

  <section class="slider-box">
    <figcaption class="slider-descript slider-descript-left">
      <h6>branding&design</h6>
      <h2>Project One</h2>
    </figcaption>
    <figure id="slider-img">

    </figure>
    <figcaption class="slider-descript slider-descript-right">
      <h6><a href="#">View project</a><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
      </h6>
      <h6><a href="#">View source</a><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
      </h6>
    </figcaption>

  </section>
  <nav class="slider-nav">
    <li class="slider-nav-button"></li>
    <li class="slider-nav-button"></li>
    <li class="slider-nav-button"></li>
    <li class="slider-nav-button"></li>
    <li class="slider-nav-button"></li>
  </nav>
</article>

任何人都可以看到我的代码可能出现的问题？