Установите задержку между каждым кликом в цикле - PullRequest
Новая
       16

Установите задержку между каждым кликом в цикле

0 голосов
/ 05 мая 2019

Я хотел бы просто установить задержку между каждым кликом. Ниже показан скрипт, который я создал. Он отлично работает, щелкая каждый элемент так, как я хочу. Проблема в том, что он щелкает по каждому элементу почти одновременно, вызывая у меня ужасную задержку.

Оригинальный код. 

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();
})();
}

Код очень прост, я пытался объяснить его как можно лучше. Может ли кто-нибудь помочь мне с этим фрагментом кода

Ответы [ 2 ]

1 голос
/ 05 мая 2019

Конечно, вы можете добавлять задержки, но, как упомянул @Brock Adams, лучше использовать другой подход, например цепочку обещаний, чтобы быть уверенным, что все клики были инициированы, прежде чем повторять цикл.

Я предполагаю задержкуиз 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);
1 голос
/ 05 мая 2019

Вот живая демонстрация потенциального решения. Смотрите встроенные комментарии: 

// 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>
...