Javascript 多次失焦时的淡入淡出效果刷新

我是网络开发新手，我喜欢它

但我遇到了一个问题，我想不出来。 当我在浏览器选项卡上失去焦点时，图像更改时产生的淡入淡出效果会多次打开

另一个问题是，我真的希望我的div元素中的图像是这样的：当我调整浏览器的大小时

 <div class="divImage">
    <img id="image"> </div>
 <div>

我的代码是：

---

创建一个新的var来检查窗口焦点。当窗口焦点消失时，只需跳过代码的其余部分

在最顶部添加一个新变量：

var lostFocus = false;

在调用者函数中添加：

if(lostFocus){ return false; }

所以它看起来像：

function Caller() {
  var imag = ["https://i.ytimg.com/vi/tq0H6nQMdNk/maxresdefault.jpg", "https://i.ytimg.com/vi/4qVMnkF7W60/maxresdefault.jpg", "https://s-media-cache-ak0.pinimg.com/originals/52/1d/e6/521de6a52e774664745132156448f43b.jpg"];
  var numarImagini = imag.length - 1;
  var i = Math.floor((Math.random() * imag.length));
  Rotate(imag[i], i);
  i++;
  setInterval(function() {
    if(lostFocus){ return false; }
    if (i > imag.length - 1) {
      i = 0;
      Rotate(imag[i], i);
      i++;
    } else {
      Rotate(imag[i], i);
      i++;
    }
  }, 2000)
}

在底部添加事件侦听器：

window.onblur = function() { lostFocus = true; };
window.onfocus = function() { lostFocus = false; };

---

创建一个检查窗口焦点的新变量。当窗口焦点消失时，只需跳过代码的其余部分

在最顶部添加一个新变量：

var lostFocus = false;

在调用者函数中添加：

if(lostFocus){ return false; }

所以它看起来像：

function Caller() {
  var imag = ["https://i.ytimg.com/vi/tq0H6nQMdNk/maxresdefault.jpg", "https://i.ytimg.com/vi/4qVMnkF7W60/maxresdefault.jpg", "https://s-media-cache-ak0.pinimg.com/originals/52/1d/e6/521de6a52e774664745132156448f43b.jpg"];
  var numarImagini = imag.length - 1;
  var i = Math.floor((Math.random() * imag.length));
  Rotate(imag[i], i);
  i++;
  setInterval(function() {
    if(lostFocus){ return false; }
    if (i > imag.length - 1) {
      i = 0;
      Rotate(imag[i], i);
      i++;
    } else {
      Rotate(imag[i], i);
      i++;
    }
  }, 2000)
}

在底部添加事件侦听器：

window.onblur = function() { lostFocus = true; };
window.onfocus = function() { lostFocus = false; };

---

非常感谢你的这件衣服。这就是我想要实现的！非常感谢你的这件衣服。这就是我想要实现的！