Question

我想简单地设置每次点击之间的延迟。下面显示的是我创建的脚本。按我想要的方式单击每个元素，效果很好。问题在于，它几乎同时单击每个元素，这导致了我的可怕延迟。

原始代码。

var timerVar = setInterval (function() {DoMeEverySecond (); }, 5000); // 
<< set to 2 seconds.

function DoMeEverySecond ()
{
(function() {
document.getElementsByName("zTab")[0].click();
document.getElementsByName("zButton")[0].click();
document.getElementsByName("zClose")[0].click();
})();
}

是否可以做这样的事情。

var timerVar = setInterval (function() {DoMeEverySecond (); }, 5000); // 
<< set to 2 seconds.

function DoMeEverySecond ()
{
(function() {
document.getElementsByName("zTab")[0].click();
-----------A DELAY HERE!-----------
document.getElementsByName("zButton")[0].click();
---------- ANOTHER ONE HERE! ----------------
document.getElementsByName("zClose")[0].click();
})();
}

代码非常简单，我尽力解释了一下。有人可以帮我解决这段代码

Answer 1

这是一个潜在解决方案的实时演示。查看内联注释：

// Lets just add some logging here for when the buttons are clicked
document.querySelectorAll('.z-tab').forEach(element => {            
  element.addEventListener('click', e => console.log('Z Tab'));
});

document.querySelectorAll('.z-button').forEach(element => {            
  element.addEventListener('click', e => console.log('Z Button'));
});

document.querySelectorAll('.z-close').forEach(element => {            
  element.addEventListener('click', e => console.log('Z Close'));
});

// Let's take advantage of async/await 
async function DoMeEverySecond () {
  const elementClassNames = ['.z-tab', '.z-button', '.z-close'];

  for (let i = 0; i < elementClassNames.length; i++) {
    const element = document.querySelectorAll(elementClassNames[i])[0];
    await delayFor(1000); // Let's wait 1000ms between each click
    element.click()
  }
}

// Delay function that will resolve a promise after the setTimeout delay has been passed.
function delayFor(delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, delay);
  });
}
DoMeEverySecond ();

<h2>Z Tabs</h2>
<button class="z-tab">1</button> <button class="z-tab">2</button>

<h2>Z Buttons</h2>
<button class="z-button">1</button> <button class="z-button">2</button>

<h2>Z Close</h2>
<button class="z-close">1</button> <button class="z-close">2</button>

Answer 2

当然，您可以添加延迟，但是正如@Brock Adams所提到的，最好在再次循环之前，使用一种不同的方法（如Promise链）来确保触发所有点击。

我假设延迟为1秒，您可以更改此延迟，但是请注意，如果您添加的延迟总计超过5秒，则点击间隔会在每个间隔内重叠。

所以您的代码会有延迟：

function doMeInInterval () {
  document.querySelector("[name=zTab]").click();
  setTimeout(function() {
    document.querySelector("[name=zButton]").click();
    setTimeout(function() {
      document.querySelector("[name=zClose]").click();
    }, 1000);
  }, 1000);
}
var timerVar = setInterval(doMeInInterval, 5000);

设置每次点击循环之间的延迟

2 个答案: