javascript window.open 不遵循 setInterval 参数？

Question

我有一个非常奇怪的特定项目，需要在多个弹出窗口中打开大量照片。 （我明白这个的可用性，请暂时绕过它。）

我在身体负荷上运行以下脚本，到目前为止有点：

// Popup window code
function runPopups() {
  popupWin1 = setInterval(
    function() {
      window.open('assets/pic1.jpg', '_blank', 'width=490,height=300,left=-1000,top=-1000')
    }, 3000);
  //clearInterval(popupWin1);

  popupWin2 = setInterval(
    function() {
      window.open('assets/pic2.jpg', '_blank', 'width=600,height=500,left=0,top=0')
    }, 3000);
  //clearInterval(popupWin2);
}

它实际上似乎加载了一次，但随后一直循环返回。当我添加

clearInterval

参数时，它完全破坏了脚本。我非常接近但不确定我做错了什么，因为 javascript 不是我的主要理解。我觉得我要么以某种方式错过了一个循环，要么我需要将它放入一个完全不同的函数中？

理想情况下，我希望每张照片都在屏幕上的随机位置弹出，延迟时间各不相同——如果每张照片都能越来越快，那就更好了。我将弹出大约 10-20 张图片。非常感谢帮助！

Answer 1

试试这个

// Popup window code
const assets = [{
  url: 'assets/pic1.jpg',
  settings: 'width=490,height=300,left=-1000,top=-1000'
}, {
  url: 'assets/pic2.jpg',
  settings: 'width=600,height=500,left=0,top=0'
}]
const runPopups = () => {
  for (i = 0; i < assets.length; i++) {
    window.open(assets[i].url, '_blank', assets[i].settings);
  }
};
runPopups();
setInterval(runPopups, 3000);

Answer 2

使用 setTimeout 而不是 setInterval，因为 setInterval 意味着每 3 秒后打开弹出窗口，这就是它一次又一次打开的原因

// Popup window code
function runPopups() {
  window.open('assets/pic1.jpg', '_blank', 'width=490,height=300,left=-1000,top=-1000')
  setTimeout(function() {
      window.open('assets/pic2.jpg', '_blank', 'width=600,height=500,left=0,top=0')
    }, 3000);
  //clearInterval(popupWin2);
}

Answer 3

您想使用带有

setTimeout

的 for 循环来单独安排每个弹出窗口。如果每个弹出窗口都有不同的名称和参数，您可以将其存储在一个数组中并使用 for 循环遍历它。

const popups = [
  {
    url: 'assets/pic1.jpg',
    params: 'width=490,height=300,left=-1000,top=-1000',
  },
  {
    url: 'assets/pic2.jpg',
    params: 'width=600,height=500,left=0,top=0',
  },
  // Add the rest here
];

function runPopups() {
  for (let i = 0; i < popups.length; i++) {
    setTimeout(
      () => window.open(popups[i].url, '_blank', popups[i].params),
      (i + 1) * 3000
    );
  }
}

示例：https://stackblitz.com/edit/typescript-2rgp5n?file=index.ts

您安排第一个在 3 秒后弹出，第二个在 6 秒后弹出，第三个在 9 秒后弹出，依此类推。如果您希望第一个立即出现，只需删除

+ 1

.