Question

我正在执行这种JavaScript，这是一种自我解释（我认为）。页面上有大约100个按钮button，我希望它们逐个点击。它工作正常。

但是我想在点击下一个按钮之前添加5秒的延迟。

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

Answer 1

您可以setInterval使用该功能。

而不是手动指定100，而是使用length属性。

同时避免使用getElementsByClassName标准。相反，大多数浏览器都支持document.querySelectorAll。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这样的东西？

//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()：

＆＃13;

//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);

＆＃13;

Answer 3

您可以使用setTimeout功能每5秒调用一次点击功能。

类似的东西：

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

Answer 4

如果您不介意使用其他库来解决此问题，那么我建议您使用Kristopher Michael Kowal的Q库。使用Array.prototype.reduce使用promises，在需要完成时迭代并解决promises。

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秒的延迟

4 个答案: