How to make a delay between clicks?

Question

I'm simulating the process of clicking all buttons in a page and now I would like to have some delay between each click by using the following code, but for some reason it refuses to work and no button is clicked:

var time = 500;
$("button").each(function() {
  setTimeout(function() {
    $(this).click();
  }, time);
  time += 500;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>TEST</title>
</head>

<body>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
</body>

</html>

Any ideas?

Are you trying to delay by 500ms and then click ALL buttons, or put a 500ms delay between each button click? — Kevin Jantzer, Aug 03 '16 at 21:59
http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — Will, Aug 03 '16 at 21:59

score 0 · Answer 1 · answered Aug 03 '16 at 22:00

var time = 500;
$("button").each(function() {
  setTimeout(function() {
    $(this).click();
  }.bind(this), time);
  time += 500;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>TEST</title>
</head>

<body>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
</body>

</html>

What are you guys doing with `$(this).click();`? Are you trying to use `$(this).trigger();` ? — TheThirdMan, Aug 03 '16 at 22:18

score 0 · Answer 2 · answered Aug 03 '16 at 22:16

I'm not entirely sure what you want to achieve, because your code doesn't do a whole lot... all I can imagine is that you want to do something when a button is pressed with an increased time after each press... if so, here you go:

var time = 500;

$(document).ready(function() {
  $('button').click(function() {
    $(this).delay(time).queue(function(n) {
      $(this).text("I've been clicked!");
      time += 500;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>
<button type="button">Click Me!</button>
<button type="button">Click Me!</button>

How to make a delay between clicks?

2 Answers2