Javascript store data into variables from same div

Question

I have a div in which there is a number that constantly changes. For instance:

<div id="current">124</div>

Then I have a JavaScript function to grab the data from this field and store it into a JavaScript variable. Because the number constantly changes, I delay the code and store the NEW number (after five seconds) into another variable.

However, when I look at the data stored in both of the variables, they are exactly the same (when the number in the div has changed). How can I change my code to store the content of the div in one variable, and store the content again (but five seconds later) in another variable?

var before = document.getElementById('current').innerHTML;
setTimeout(function(){}, 5000);
var after = document.getElementById('current').innerHTML;

`setTimeout(function(){}, 5000);`???? Here is a nice reference on how to use `setTimeout`: https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout — Derek 朕會功夫, Feb 16 '14 at 23:02
possible duplicate of [Is there some way to introduce a delay in javascript?](http://stackoverflow.com/questions/24849/is-there-some-way-to-introduce-a-delay-in-javascript) — Felix Kling, Feb 16 '14 at 23:10

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

This should do the trick:

var after;
var before = document.getElementById('current').innerHTML;

setTimeout(function(){
   after = document.getElementById('current').innerHTML;
}, 5000);

Why is this?

Your usage of setTimeout does (almost) nothing. Your code step by step:

assign before
Setup empty anonymous callback to the be executed after 5000ms
assing after
After 5000ms the anonymous callback is executed, doing nothing at all

The suggested code step by step;

create after
assing before 3 Setup anonymous function to the be executed after 5000ms
After 5000ms the callback function is executed, assigning after from the outer scope to document.getElementById('current').innerHTML

Fiddle:

http://jsfiddle.net/marionebl/bE5Jd/1/

You probably should read up on closures and callbacks.

edited May 23 '17 at 12:21

Community

1
1

answered Feb 16 '14 at 23:03

marionebl

3,342
20
34

This assumes you access `after` after the timeout has fired, you probably should add the code that depends on the assignment of `after` – marionebl Feb 16 '14 at 23:27
To follow up on this: the easiest way to ensure your code uses the correct value would be to execute it in the setTimeout callback. – marionebl Feb 17 '14 at 11:45

score 0 · Answer 2 · answered Feb 16 '14 at 23:04

0

setTimeout does not mean "delaying the code after".

Try this:

var before = document.getElementById('current').innerHTML, after;
setTimeout(function(){
    after = document.getElementById('current').innerHTML;
}, 5000);

answered Feb 16 '14 at 23:04

Derek 朕會功夫

92,235
44
185
247

score 0 · Answer 3 · answered Feb 16 '14 at 23:04

The setTimeout function will create a new "thread" executing the function passed, and then continue with the current "thread" (In quotes because they are not truly threads, but the result is similar to threading).

This means 5 seconds have not passed between the assignment of before and after. Try this instead:

var after, before = document.getElementById('current').innerHTML;
setTimeout(function(){
  after = document.getElementById('current').innerHTML;
}, 5000);

Javascript store data into variables from same div

3 Answers3