setTimeout与Java中正常函数执行

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 (ie 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:

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

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

3. Any other alternative for setTimeout above?

Answer 1

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 .

Answer 2

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.

Answer 3

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.

Answer 4

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()

  }