How to `wait` in JavaScript

Question

I have a small Chrome Extension written in javascript with jQuery that should grab some data from a web page. Target HTML looks like:

<div id="options">
  <div class="option"><div class="checkbox">1</div></div>
  <div class="option"><div class="checkbox">3</div></div>
  <div class="option"><div class="checkbox">5</div></div>
  <div class="option"><div class="checkbox">Other value</div></div>
  ...
</div>
<div id="result">0</div>

When any of .checkbox is checked #result will change. My task is to check .checkbox one by one and get #result for each.

var result = {};
// for each checkbox
$('#options .option').each(function(){
  // check it
  this.click()
  // wait a bit. Of course ideally if we can wait while #result is not changed but in practice sometimes checkbox doesn't change the result. So it will be enough to wait a few seconds
  // store data
  result[this.text()] = $('#result').text();
  // uncheck the checkbox
  this.click()
  // wait
});
console.log(result);

Any ideas how to wait correctly? Thanks

UPD: A little example that show my problem https://codepen.io/mihajlo-osadchij/pen/MNyazz

setTimeout will call a callback after a given wait - though there's far better ways to do what you want using event handlers — Jaromanda X
– Jaromanda X, Commented Jul 23, 2019 at 23:15
I believe you want to use an event handler instead of waiting for a bit to see if the checkbox was clicked on. — blurfus
– blurfus, Commented Jul 23, 2019 at 23:16
Why do you need to wait? Do you control the code that updates the value? If you do, you could fire a custom event or maybe you could listen to changes of the #result content itself and then check the values of the option. Could you give more details? — msg
– msg, Commented Jul 25, 2019 at 19:31

mwilson · Accepted Answer · 2019-07-23 23:23:43Z

1

As others are saying, you should use event handlers instead of doing a manual wait. Here is a basic example of how to bind a change event to get the value of the checkbox that has changed.

If you did use something like setTimeout, you would quite literally be purposefully slowing down your application due to bad design.

$('.checkbox').on('change', (evt) => {
	console.log(evt.target.value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" value="1" />
<input type="checkbox" class="checkbox" value="2"  />
<input type="checkbox" class="checkbox" value="3"  />
<input type="checkbox" class="checkbox" value="4"  />

answered Jul 23, 2019 at 23:23

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GhostKU Over a year ago

I'm sorry but I can't get how can I use event handler in my case. Can you give me an example with my code? My problem is not to wait while checkbox is changed but to wait while text in #result will be changed after checkbox pressed. Thanks.

mwilson Over a year ago

It's unclear what it is you're trying to do. What IS clear is that you want event listeners/handlers to accomplish it. Are you programatically 'clicking' the checkboxes and trying to obtain the result from the programtic click?

GhostKU Over a year ago

Right you are, I need to obtain the result. I've made a little example codepen.io/mihajlo-osadchij/pen/MNyazz Hope it helps

blurfus · Accepted Answer · 2019-07-23 23:22:26Z

0

I believe you want to use an event handler instead of waiting for a bit to see if the checkbox was clicked on.

Since you are already using jQuery, it could be as simple like the demo below:

$(function(){
  $(".checkbox").on('click', function(){
     $("#result").text( $(this).text());
  });
});

.option{  
   width: 100px;
   height: 15px;
   border: 1px solid gray;
   padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="options">
  <div class="option"><div class="checkbox">1</div></div>
  <div class="option"><div class="checkbox">3</div></div>
  <div class="option"><div class="checkbox">5</div></div>
  <div class="option"><div class="checkbox">Other value</div></div>  
</div>
Results: <span id="result">0</span>

answered Jul 23, 2019 at 23:22

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

1 Comment

GhostKU Over a year ago

Same question: I'm sorry but I can't get how can I use event handler in my case. Can you give me an example with my code? My problem is not to wait while checkbox is changed but to wait while text in #result will be changed after checkbox pressed. Thanks.

Collectives™ on Stack Overflow

How to `wait` in JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related