时间戳

首页 > 解决方案 > 打开新标签后如何修复setInterval延迟（手机也是如此）

javascript - 打开新标签后如何修复setInterval延迟（手机也是如此）

问题描述

目标是在粉红色的东西滑动后改变图片。但是打开一个新标签，或者... 如果在移动版本中屏幕关闭然后再次打开，图片更改所需的时间会变小。

我查了相关的数据setInterval，但我无法解决，所以我留下一个问题。

我可以用hackertime.js解决它吗？有什么好办法吗？让我们分享其他人制作的代码。

var rollImg = ["https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=",
"https://cdn.leroymerlin.com.br/products/letra_b_11cm_acrilico_preto_kami_acrilicos_89622526_0001_600x600.jpg"];

var layer1Interval = 4000;
var layer2Interval = 5000;
var animationInterval = 1000;
$(function() {
  var roll = 1;
  function rollFnc () {
    setTimeout(function() {
      roll++;
      if (roll > 2) {
        roll = 1;
      }
      $("#box1").attr("src", rollImg[roll - 1]);
      setTimeout(rollFnc, layer1Interval + animationInterval * 1.5);
    }, animationInterval / 2);
  }
  
  rollFnc();
})

var tl = new TimelineMax({
  repeat: -1,
  repeatDelay: (layer1Interval / 1000)
});
tl.from(".layer1", animationInterval / 1000, {
  scaleX: 0,
  transformOrigin: "left",
  ease: 'expo.inOut'
});
tl.to(".layer1", animationInterval / 1000, {
  scaleX: 0,
  transformOrigin: "right",
  ease: 'expo.out'
});
,
main {
  position: relative;
  width: 100%;
}

.box1 {
  width: 40.4%;
  position: absolute;
  top: 3.7%;
  left: 15%;
}

.box1 img {
  width: 100%;
}

.box2 {
  width: 19.9%;
  position: absolute;
  top: 3.7%;
  left: 56.8%;
}

.box2 img {
  width: 100%;
}

.layer1 {
  background-color: #f85983;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.layer2 {
  background-color: #f85983;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>

<body>
  <div class="main">
    <div class="box1">
      <div class="layer1" id="layer1"></div>
      <img id="box1" src="https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=" alt="">
    </div>
  </div>

</body>

</html>

我会做这个https://vimeo.com/567175966

谢谢！！

标签： javascriptsetinterval

解决方案

推荐阅读