Javascript setTimeout: How to print the values given in the order?

Question

I have started to learn JavaScript and am trying to figure out how to achieve this?

console.log(1);    
setTimeout(() => {  
    console.log(2);  
}, 2000);   
console.log(3);

We know that the output is 1,3,2
How can I get the output in the order it is given.
Example: It should print 1,then it should wait for 2 seconds and then print 2 and it should print 3.

Moving your `console.log(3)` inside the setTimeout? Also, it isn't possible to pause the javascript thread (execution). Or you can create 3 functions who call each other one by one — marcXandre, Feb 11 '19 at 23:04
Use RxJs, const watch = new BehaviorSubject(); console.log(1); of().pipe(delay(2000)).subscribe(() => { console.log(2); watch.next(); }); watch.subscribe(() => { console.log(3); }); — Adrian Brand, Feb 12 '19 at 01:02
working version const { of, Subject } = rxjs; const { delay } = rxjs.operators; const watch = new Subject(); console.log(1); of(1).pipe(delay(2000)).subscribe(() => { console.log(2); watch.next(); }); watch.subscribe(() => { console.log(3); }); — Adrian Brand, Feb 12 '19 at 01:13
@AdrianBrand You really should not have edited the question to include a solution, that's what answers are for. And yes, I really think this should be closed as a duplicate of the canonical async question. — Bergi, Feb 12 '19 at 12:54
console.log(1); setTimeout(() => { console.log(2); printThree(); }, 2000); function printThree() { console.log(3); } — Alagarasan M, Feb 12 '19 at 12:58
@Bergi once answers are years old and methods have changed then we should allow new versions. — Adrian Brand, Feb 12 '19 at 22:07
@AdrianBrand Methods haven't really changed, and the explanation why it works as it is won't become outdated. The fundamental problem is the same, and we still use callbacks to solve it, even if high-level abstractions like promises or observables that let us compose these callbacks more easily have become more common-place. — Bergi, Feb 12 '19 at 22:58

score 1 · Answer 1 · answered Feb 12 '19 at 12:56

1

Just do this? Am I missing something?

console.log(1)
setTimeout(() => {  
    console.log(2) 
    console.log(3)
}, 2000)

answered Feb 12 '19 at 12:56

James Coyle

9,922
1
40
48

I like this answer – devDan Feb 12 '19 at 13:00

score 0 · Answer 2 · edited Feb 12 '19 at 14:21

I think what you might be looking for (though not obvious from the question) is whats called a 'callback' function. The general idea is that when function A is finished it calls function B (the callback). This way you can chain things together to run in the order you are looking for.

See example:

const callback = function(){
 console.log(3); 
};

$('#go').on('click', function(){
 console.log('1')
 setTimeout(function(){
  console.log(2);
  callback();
 }, 2000);  
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Go</button>

score 0 · Answer 3 · answered Feb 12 '19 at 22:10

User RxJs and some reactive programming.

const { of, Subject } = rxjs;
const { delay } = rxjs.operators;

const watch = new Subject();

console.log(1);

of(1).pipe(delay(2000)).subscribe(() => {
  console.log(2);
  watch.next();
});

watch.subscribe(() => {
  console.log(3);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>

Javascript setTimeout: How to print the values given in the order?

3 Answers3