Detailed explanation of settimeout() and setinterval()

JavaScript It's a single-threaded language , But it can specify that the code is executed at a specific time by setting the timeout value and the interval value . A time-out value is when code is executed after a specified time , The interval time value means that the code is executed every specified time .

Timeout call

The timeout call uses window Object's setTimeout() Method , It takes two arguments ： The code to execute and the time in milliseconds （ Wait time before code execution ）. among , The first argument can be a string （ and eval() Same as the string used in ）, It can also be a function .

The second parameter is a number of milliseconds indicating how long to wait , But the code does not necessarily execute after that time .JavaScript It's an interpreter for one line programs , So only one piece of code can be executed in a certain period of time . To control the code to be executed , There is one JavaScript Task queue . These tasks are executed in the order they are added to the task queue .setTimeout() The second parameter of tells JavaScript How long will it take to add the current task to the queue . If the queue is empty , Then the added code will be executed immediately ; If the queue is not empty , The added code will be executed after the previous code is executed .

call setTimeout() after , This method will return a value ID, Indicates a timeout call . This timeout call ID Is the unique identifier of the planned execution code , It can be used to cancel the timeout call . Cancel timeout call using method clearTimeout();

Intermittent call

Intermittent calls are similar to timeout calls , It's just that it executes code repeatedly at specified intervals , Until the intermittent call is canceled or the page is unloaded . The way to set intermittent calls is setInterval(), The parameters it receives are the same as setTimeout() identical . Canceling an intermittent call is far more important than a timeout call .

But usually , Intermittent calls are rarely really used , Because the latter intermittent call may be called before the end of the previous intermittent call . therefore , We usually use timeout calls to simulate intermittent calls

Here are two small demo：

1、 Get the current date and let it appear in the text box , Click on “stop” The event after the button is still .（ Intermittent call ）

HTML Code ：

<input type="text" size="50" id="clock" />
<input type="button" value="Stop" id="btn" />

JavaScript Code ：

function clock(){
    
    var time = new Date();
    document.getElementById("clock").value = time;   
    var btn =document.getElementById("btn");
    btn.onclick = function(){
    
       clearInterval(t); 
    }
}
var t = setInterval(clock,1000);

2、 Use setTimeou() To achieve the effect of counting and statistics , And display the value in the text box .

HTML Code ：

<input type="text" id="count" />

JavaScript Code ：

var num = 0;
function startCount(){
    
    document.getElementById("count").value = num;
    num += 1;
    setTimeout(startCount,1000);    //setTimeout It's a timeout call , Use recursion to simulate intermittent calls 
}    
setTimeout(startCount,1000);    //1s After execution 

（ This question was once my interview topic , After being cheated by it, I went through various Baidu checks , I think it's not bad , So share it with you .）