Set pause times in between lines in JavaScript

Question

I am newbie at Javascript and I am trying the following code

var output = document.getElementById('output');

console.dir(output);
console.log(output.baseURI);
console.log(output.clientWidth);
console.log(output.outerHTML);

setTimeout(() => { output.innerText = "Thank You"; }, 3000);
setTimeout(() => { output.innerHTML = "Thank You Very Much"; }, 3000);

At this point, output.innerText = "Thank You";, I expect to see Thank You as I put a waiting time 3 seconds but this doesn't happen at all and I can't see "Thank You" at all How can I easily set pausing points of waiting so as to observe each change? and how I debug line by line in JavaScript?

I think this [link](https://stackoverflow.com/questions/14226803/wait-5-seconds-before-executing-next-line) could help you. I hope it's useful for you! And about the Debugging question, there're lot's of IDEs that have the debug option, such as VSC or gltich.com have the "debug option". — EncryptEx, May 08 '20 at 10:56
`setTimeout` ist `async`, so the next line of code will be executed before the timeout is done. After the delay, the `callback` given as a param in `setTimeout` will be executed. So you either have to make use of `async/await` or you have to chain those callbacks. You could also write a promise which will be resolved once the timeout has passed — messerbill, May 08 '20 at 10:57

m02ph3u5 · Accepted Answer · 2020-05-08T11:15:58.840

2

Both your callback will run almost simultaneously. If you want the second one to be offset from the first one by three seconds set it once the first callback has fired:

setTimeout(() => { 
    output.innerText = "Thank You";
    setTimeout(() => { output.innerHTML = "Thank You Very Much"; }, 3000);
}, 3000);

See also https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

--- Quick explanation ---

The JS engine does not stop and wait for three seconds when you call setTimeout(() => {}, 3000). It just registers the callback to be called in approximately 3000 milliseconds and moves on.
Let's say that the engine needs 1ms to execute that line and we start at 0ms. Then your first callback will be executed in the 3001st millisecond, the next will be executed in the 3002nd millisecond (approx.). Since you computer is so fast you will never see the outcome of the first callback for it's instantly overwritten by the next.

edited May 08 '20 at 11:15

answered May 08 '20 at 10:56

m02ph3u5

3,022
7
38
51

Thanks a lot. That works well. But I wonder of building a UDF that can be used all through the code. As I need to learn and see every change through the process of learning. – YasserKhalil May 08 '20 at 11:15
1

I don't know what you mean by `UDF` but if you need to step through the code you can utilizie the `debugger;`. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger – m02ph3u5 May 08 '20 at 11:17
Thanks a lot for the great hint. I think this will be useful for me as a beginner. By the way, UDF means User-Defined Function and In VBA (Visual Basic for Applications) that means to build a function and use it all through the code by one line – YasserKhalil May 08 '20 at 11:22

score 1 · Answer 2 · answered May 08 '20 at 11:14

1

You can do this as well.

   var output = document.getElementById('output');

   setTimeout(function(){
         output.innerHTML = "Thank You";
         setTimeout(function(){
              output.innerHTML = "Thank You Very Much";
          }, 3000);
    }, 3000);

answered May 08 '20 at 11:14

Jesper Martinez

611
5
15

The same answer as m02ph3u5. Thanks a lot. – YasserKhalil May 08 '20 at 11:16

Set pause times in between lines in JavaScript

2 Answers2