setTimeout vs normal function execution in Javascript

Question

In my application, I have a submitSuccesscallback function, which will be triggered from my own JS library when submit was successful. Within submitSuccesscallback, I am first displaying a loader and doing some initialization operations.

function submitSuccesscallback(){
  showLoadingIndicator(); // has code a display loader
  doSubmitSuccessOperations();// has code to do some app specific operations
}

here doSubmitSuccessOperations() is taking around 5 secs for complete execution.

Now my problem is above code does n't display loader (i.e ui changes from showLoadingIndicator()) upto 5 secs after I get the submitSuccesscallback().

If I change submitSuccesscallback() like below, I am able to see loader immediately after I trigger submitSuccesscallback().

 function submitSuccesscallback(){
  showLoadingIndicator(); // has code a display loader
  setTimeout(doSubmitSuccessOperations, 1000);
}

Now what I would like to know is:

does setTimeout makes my doSubmitSuccessOperations() run in background?
I clearly sense that doSubmitSuccessOperations() is blocking UI operation, is there any concept of UI thread and background thread in JS?
Any other alternative for setTimeout above?

The setTimeout is giving your code enough time to update the DOM. What is causing the lock in that other function? My guess a huge loop. — epascarello
– epascarello, Commented Nov 17, 2015 at 12:59
@epascarello even if a specify setTimeout(doSubmitSuccessOperations, 10); it is working fine. — Ganesh K
– Ganesh K, Commented Nov 17, 2015 at 13:03
@vrs that's because what you're effectively doing is running the doSubmitSuccessOperations function in another thread. setTimeout(fn, 0); would also work. — Rory McCrossan
– Rory McCrossan, Commented Nov 17, 2015 at 13:05
5 seconds of processing in a modern browser is a tremendous amount of time. What exactly is that code doing? — Pointy
– Pointy, Commented Nov 17, 2015 at 13:09

Joseph · Accepted Answer · 2015-11-17 13:22:12Z

does setTimeout makes my doSubmitSuccessOperations() run in background?

No. JS is single-threaded. Code and rendering are in the same thread. That's why long-running operations block rendering.

What setTimeout does is set aside that operation until the engine can execute it (it doesn't halt running code) and is at least (and not exactly) after the delay you specified. Code that comes after it executes normally as if it were the next operation in the thread. That means the code inside setTimeout is already not in the same order it appears in your code.

I clearly sense that doSubmitSuccessOperations() is blocking UI operation, is there any concept of UI thread and background thread in JS?

Any other alternative for setTimeout above?

Async programming is one, and timers (setTimeout and friends) are the most available. In other environments, IE has setImmediate, and Node has process.nextTick. There's also WebWorkers, which are closer to real threads. If you have a server, you can use AJAX (which is also a form of async operation) to call a server and let it do the operation for you.

Here's a video that explains how the event loop works. Somewhere in the middle of the video explains how setTimeout schedules your callbacks.

nstoitsev · Accepted Answer · 2015-11-17 13:09:05Z

Basically, you have a JavaScript engine that is running your code in the browser. This engine has a call stack. It's a stack of all the functions that you queued for executing. There is also a thing called the event loop which is a queue that contain functions that are queued there as a side effect of some event. When the call stack is empty, the function that is put on the top of the event loop is pushed in the call stack and get executed. This call stack is "inside" your UI thread.

When you call setTimeout(doSubmitSuccessOperations, 1000); the doSubmitSuccessOperations is added to the event loop 1 second after this line of code is executed. When all your UI logic is executed(showing spinners, moving texts, animations, etc.), the call stack will be empty. Then doSubmitSuccessOperations will be popped out of the event loop and pushed inside the call stack. This is when the function gets executed.

So, no, setTimeout does not make doSubmitSuccessOperations run in the background. It just make it run after your UI logic.

There is a concept for background thread and it's called a service worker. But you can't do UI operations inside it.

Vitaliy Terziev · Accepted Answer · 2015-11-17 13:06:16Z

2

1) does setTimeout makes my doSubmitSuccessOperations() run in background? - No

2) I clearly sense that doSubmitSuccessOperations() is blocking UI operation, is there any concept of UI thread and background thread in JS? - No

3) Any other alternative for setTimeout above? - you can try and put 0 in the timeout, this way the engine will try to execute the function in the first available spot.

answered Nov 17, 2015 at 13:06

Vitaliy Terziev

6,7313 gold badges19 silver badges29 bronze badges

Comments

Shailendra Sharma · Accepted Answer · 2015-11-17 13:18:44Z

All of your queries explained in other answer for your third query you can use callback pattern to show loading image it will work you can try Instead of this

function submitSuccesscallback(){
    showLoadingIndicator(); // has code a display loader
    doSubmitSuccessOperations();// has code to do some app specific operations
  }

something like

submitSuccesscallback(function(){
  showLoadingIndicator(function(){
  doSubmitSuccessOperations()
  })
})

And your other function must handle callback something like

function showLoadingIndicator(callback){
// your code to display loading image
 $('loadingimage').show(0,'', function(){
    callback();
});

}

function submitSuccesscallback(callback){
    // your code must be sync here 
    // if asynchrony than call callback in .success function

   //at last(if no asyn operation)
   callback()

  }

Collectives™ on Stack Overflow

setTimeout vs normal function execution in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related