在 JavaScript 代码中添加 5 秒的延迟，然后再单击下一步按钮

Question

我正在执行此 JavaScript，这是不言自明的（我认为）。 class button 页面上有大约 100 个按钮，我希望它们一个一个地单击。一切正常。

但我想在单击下一步按钮之前添加 5 秒的延迟。

var mybtn = document.getElementsByClassName('.button');
for( var i=0; i<100; i++ ) {
    mybtn[i].click();
}

Answer 1

您可以使用 setInterval 实现该功能。

不要手动指定 100，而是使用长度属性。

同时避免使用 getElementsByClassName 它不是标准的。大多数浏览器都支持 document.querySelectorAll。

var mybtn = document.querySelectorAll('.button');
var i = 0;

var timer = setInterval(function() {
     if( i < mybtn.length) {
         mybtn[i].click();
         console.log("Click handler for button " + i + " fired");
     } else {
         clearInterval(timer);
     }
     i = i + 1;
}, 5000);

<div class="button">Hi1</div>
<div class="button">Hi2</div>
<div class="button">Hi3</div>
<div class="button">Hi4</div>
<div class="button">Hi5</div>

Answer 2

您可以使用setTimeout函数每5秒调用一次点击函数

类似于：

setTimeout(function(){ mybtn[i].click(); }, 5000);

Answer 3

是这样的吗？

//var buttons = document.getElementsByClassName('.button'); // Not standard
var buttons = document.querySelectorAll('.button');

function clickButton(index) {
    mybtn[index].click();
    if(index < buttons.length) {
        setTimeout("clickButton(" + (index+1) + ");", 5000);
    }
}

setTimeout("clickButton(0);", 5000);

为了测试，我添加了 alert():

//var buttons = document.querySelectorAll('.button');

function clickButton(index) {
    //mybtn[index].click();
    alert("button" + index);
    if(index < 100) {
        setTimeout("clickButton(" + (index+1) + ");", 5000);
    }
}

setTimeout("clickButton(0);", 5000);

Answer 4

如果你不介意使用另一个库来解决这个问题，那么我建议你使用 Kristopher Michael Kowal 的Q library. Using promises by using Array.prototype.reduce，在需要实现时迭代和解决承诺。

DEMO

// Query all buttons
var buttons = document.querySelectorAll('.button');

// Register Click Event Handlers
Array.prototype.forEach.call(buttons, registerButtonClickHandlers);


// Invoke button click
Array.prototype.reduce.call(
  buttons,
  reduceButtonPromises , 
  Q.when()
);

function registerButtonClickHandlers(button) {

  button.addEventListener('click', function() {
    // display time end
    console.timeEnd(button.innerHTML);
  });

}

function reduceButtonPromises(promise, button) {

  // register promise callback
  return promise.then(function() {

    // deferred object
    var deferred = Q.defer();

    setTimeout(function() {
      // set time start
      console.time(button.innerHTML);
      // click button
      button.click();
      // resolve the promsie to trigger the next promise
      deferred.resolve();
    }, 100);

    // promise
    return deferred.promise;

  });

}

在 JavaScript 代码中添加 5 秒的延迟，然后再单击下一步按钮

Add delay of 5 seconds in JavaScript code befor clicking next button

javascript

dom

click