Things to know:
1. JS is single-threaded (why? Because it can improve efficiency. As a browser scripting language, the main purpose of js is to interact with users and manipulate the DOM. This also determines that it can only be single-threaded, otherwise it will bring very Complex synchronization problem), that is to say, it is impossible to execute several pieces of code at the same time. Such as:
1 var a=12 ;
2 var b=15;//When js is running, first perform the operation of assigning 12 to a, and then perform the operation of assigning 15 to b
2. Synchronous vs Asynchronous
Synchronization: You can only do one thing at a time, even if it takes a long time, it still requires you to stay there until the thing is done;
Asynchronous: When you are doing one thing, because this thing will take a long time, you can deal with other things first during the waiting process, and then come to deal with her when it is your turn.
Difference: The execution order of each process on this pipeline is different.
setTimeOut(timer) VSsetTimeInterval(interval timer)
The most basic asynchronous operations in js are setTimeOut() and setTimeInterval().
1. The setTimeOut() method is used to perform certain operations after a specified number of milliseconds;
1 //3秒后弹出“Hello” 2 var myVar; 3 4 function myFunction() { 5 myVar = setTimeout(alertFunc, 3000); 6 } 7 8 function alertFunc() { 9 alert("Hello!"); 10 }
2.API:
1 var id = setTimeout(fn,timer); 2 // fn is the execution function 3 // timer interval time 4 // returns an id value, which can be cleared by clearTimeout(id) before fn is not triggered, so that fn is not executed 5 clearTimeout(id);
3. Use the clearTimeOut() method to block the execution of the function;
4. Returns an ID (number) that can be passed to clearTimeout() to cancel execution.
1.setInterval describes how often an operation is performed;
2. The setInterval() method will keep calling the function until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as an argument to the clearInterval() method;
3.API:
var id = setInterval(fn,timer); // fn is the function to be executed, // timer is the interval time // returns an id to clear the interval timer with clearInterval at a future time clearInterval(id);
Differences and connections:
1. First of all, it is explained from the concept that setTimeout performs an operation after a certain amount of time, only once, and setInterval performs an operation every time after, if it is not cleared by clearInterval, it will continue to be performed;
2. Both methods return an id value for clearing the timer, clearTimeout and clearInterval respectively;
3. In terms of performance again, the performance of setTimeout is better than setInterval;
4. Neither setTimeout nor setInterval can guarantee that it will be executed at the time point, such as: setTimeout(fn, 5000), it cannot guarantee that fn will be executed after 5s. This depends on whether there are other queues to be processed in the current js thread queue. If there is no queue, then it can be executed. If there are other queues to be processed in the current thread, it needs to be queued and wait until the javascript thread is idle. The timer will be executed when
5. setTimeout is to wait for the loop operation to complete, and then continue to add the loop operation to the javascript thread after the interval time, while setInterval does not wait, it never cares whether the loop operation is completed in the thread or not. Anyway, the loop operation will be added to the javascript thread queue at the point;
6. The operations that can be implemented with setInterval must be implemented with setTimeout.
Task queue:
1. It is a queue of events or a queue of messages.
2. All tasks are executed on the main thread, forming an execution context stack ;
3. After the code of the main thread of js is executed, the event in the browser task queue will be viewed, and then the code corresponding to the event in the js code will be executed;
4. Tasks such as ajax are placed in the task queue, which is handed over to the browser to initiate an HTTP request to execute. When there is a return result, an event will be added to the task queue to indicate that the ajax request has returned the result, and the task The tasks in the queue and the js main thread are executed at the same time. It does not affect the conclusion that js is a single thread, it can only be said that the browser will also provide interfaces for js
Implement asynchronous operations;
5. Once all the synchronous tasks in the execution stack are executed, the system will automatically read the "task queue" to see what events, those corresponding asynchronous tasks, then end the waiting state, enter the execution stack, and start execution;
6. The main thread keeps repeating step 5 above (as long as the main thread is empty, it will read the task queue, and this process will continue to repeat, which is the operating mechanism of js ).