How to Delay js function after click

Question

I want to add a delay after clicking a button to get some data. The script is run inside the browser console.

$(pages()) get's the pagination buttons.

  let calls = [];  
  for (let i = 1; i <= callPagesCount; i++) {
    $(pages()).find('a')[i].click()

    setTimeout(() => {}, 200)

    // Call the below, 200 ms later
    callsNode().map((i, el) => {
      calls.push({
        call_condition: $(el).find('div > span').text().trim(),
        date: $(el).find('div').text().trim().match(/\[(.+)\]/i),
      })
    })
  }

I think you just want to put that callsNode().map... inside the curly braces of the setTimeout. That way it will be executed after 200ms. — user2345
– user2345, Commented Sep 25, 2017 at 0:17
Do you mean, click the button, it will execute something in the server, then after some time to show the return data in the browser? Otherwise what is the difference between wait and not wait? — forqzy
– forqzy, Commented Sep 25, 2017 at 0:17

guest271314 · Accepted Answer · 2017-09-25 01:13:07Z

You can use $.map(), .delay(), .queue(), .promise()

$(() => {
  $("a").on("click", e => {
    e.preventDefault();
    console.log("clicked")
  });

  $({}).queue("pages"
  , $.map($("a") /* Array.from({length:callPagesCount}, (_, i) => i + 1) */ 
  , (el, i) =>
    (next) => {
      el.click();
      /*
      $(pages()).find('a')[i].click()
      */
      $({}).delay(1000 /* 200 */ , "delay")
        .queue(_next => {
          /*
          callsNode().map((i, el) => {
            calls.push({
              call_condition: $(el).find('div > span').text().trim(),
              date: $(el).find('div').text().trim().match(/\[(.+)\]/i),
            })
          })
          */
          _next();
        }).dequeue("delay")
        .promise("delay").then(next)
    }
  )).dequeue("pages");
})

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

Will · Accepted Answer · 2017-09-25 00:18:51Z

0

An easy way to delay in JavaScript is to use the setTimeout function.

setTimeout((() => {
    // do something after a delay
}), 200);

Change 200 to the time you want to wait in milliseconds.

In your case, it looks like you want to put callNodes.map()... inside the setTimeout:

  let calls = [];  
  for (let i = 1; i <= callPagesCount; i++) {
    $(pages()).find('a')[i].click()

    setTimeout((() => {
        // Call the below, 200 ms later
        callsNode().map((i, el) => {
          calls.push({
            call_condition: $(el).find('div > span').text().trim(),
            date: $(el).find('div').text().trim().match(/\[(.+)\]/i),
          })
        })
    }), 200);


  }

edited Sep 25, 2017 at 0:18

answered Sep 25, 2017 at 0:16

Will

1,3012 gold badges18 silver badges28 bronze badges

2 Comments

TaoJS Over a year ago

Yes, but setTimeout keeps it's own context, how to push to calls array?

Will Over a year ago

I don't think I understand—you'd still be pushing to the calls array.

Collectives™ on Stack Overflow

How to Delay js function after click

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related