An interview question :
“setInterval and setTimeout What's the difference? ”

“ If setInterval The timer's callback function needs to be executed 5 second , And the timer interval is 3 second , What will happen then ?”

Verification code

The way to make the program stay for a fixed time is as follows :

function sleep(time) {
let startTime = window.performance.now();
while (window.performance.now() - startTime < time) {}
}

The running code is as follows :

let count = 1;
let getTime = window.performance;
let startTime = getTime.now(); setInterval(function () {
console.log(` The first ${count} Time to start ${getTime.now() - startTime}`); // Show start time
sleep(500); // Procedure detention 500ms
console.log(` The first ${count} End of ${getTime.now() - startTime}`); // Show end time
count += 1;
}, 300); // 300ms interval

For the convenience of testing setTimeout, Change it

function test(){
console.log(` The first ${count} Time to start ${getTime.now() - startTime}`); // Show start time
sleep(500); // Procedure detention 500ms
console.log(` The first ${count} End of ${getTime.now() - startTime}`); // Show end time
count += 1;
count>10 && clearInterval(t);
} let count = 1;
let getTime = window.performance;
let startTime = getTime.now(); var t = setInterval(test , 300); // 300ms interval

It's the same with other browsers , But in NODE in

Change it to setTimeout, It turns out the same thing

function sleep(time) {
let startTime = window.performance.now();
while (window.performance.now() - startTime < time) {}
} function test(){
console.log(` The first ${count} Time to start ${getTime.now() - startTime} ID:${t}`); // Show start time
sleep(500); // Procedure detention 500ms
console.log(` The first ${count} End of ${getTime.now() - startTime}`); // Show end time
count += 1;
count<10 && setTimeout(test,300);
} let count = 1;
let getTime = window.performance;
let startTime = getTime.now();
var t;
test(); // 300ms interval
The conclusion so far :
1. In the standard ,setInterval() If the code was not executed last time , The execution of the code will be skipped .
2. Browser ,setInterval() If the code was not executed last time , I won't skip this code , Instead, they put it in the queue , Wait for the code to be executed immediately after the previous execution .
3. Node in ,setInterval() Will be strictly in accordance with the interval .

link :https://www.jianshu.com/p/0ad05e325f9b

About setInterval More related articles about the pit of

  1. You may not know setInterval The pit of

    You may not know setInterval The pit of I always remember before setInterval There are some pits , But it's not clear what those pits are . Today I went to find out , Decide to make a note so that you don't forget , Also hope to let more people know about this pit . ...

  2. Small program pit redirectTo timer setInterval clearInterval

    var time = 20: var timer = setInterval(function () { time = time - 1; that.setData({ CountDown: time ...

  3. js Of setInterval and setTimeout The shallow pits of the earth

    setInterval and setTimeout Let me just mention the difference setInterval() : According to the specified period ( In milliseconds ) To call a function or evaluate an expression . Methods will call functions all the time , until clearInterval() ...

  4. H5 Embedded native development summary ---- Compatible with Android and ios The way to fill the hole

    At first I heard about development H5, I think it's a mobile web page that adapts to modern browsers , I don't care IE 了 , Ouye . To this day , I found out that too young too simple, compatible IE And compatible with Android and IOS, The latter drives you crazy . Next, count the steps ...

  5. react-native Step on a hole

    Recently in use react-native I met a lot of pits when I was in the hospital , Here to share with you One . style react-native Although support flex Layout , But all the styles are css A small collection of styles , Especially under Android, the problem is particularly serious ...

  6. JavaScript History of pit filling

    explain :   This is the author usually accumulated some feel more interesting or more difficult JavaScript Topic understanding and experience , It will be kept up to date for a long time . 1.setTimeout and setInterval In depth understanding of stay setTimeout and s ...

  7. JavaScript Pit jumping guide

    JavaScript Pit jumping guide pit 0-String replace string Of replace Methods we often use , Replace string Some characters in , Grammar is like this string.replace(subStr/ ...

  8. And webview The pits I stepped on in dealing with

    With HTML5 It's used more and more web APP In the development of ,webview This artifact is becoming more and more important . In a nutshell ,webview Can open up a window in the mobile application , It shows in it html page ,css as well as js Code ...

  9. In those years , We were trapped together H5 Audio

    Original address :http://weibo.com/p/23041874d6cedd0102vkbr   Don't be frightened by such a literary title , I'm not going to tell you about high school girls , There's no other reality that shouldn't exist, and the novel can't ...

Random recommendation

  1. jQuery Jump to the bottom in different ways

    jQuery Jump to the bottom of the page Online experience :http://hovertree.com/texiao/jquery/9.htm Here's the complete HTML Code : <!DOCTYPE html> < ...

  2. A string may contain a~z Multiple characters in , If there is a repetition , Such as String data=&quot;aavzcadfdsfsdhshgWasdfasdf&quot;, Find the letter that appears the most times and the number of times , If there are multiple repetitions, all of them will be solved .

    To master String The method in char[] toCharArray()           Convert this string to a new character array . int indexOf(String str)           return ...

  3. spark1.4 Local mode programming exercises for (1)

    spark Programming practice Affirming : The following code is only for learning reference , Do not use for commercial purposes . Wordcount UserMining TweetMining HashtagMining InvertedIndex Tes ...

  4. [AngularJS] Directive with Transcluded Elements

    Create a wrapWith directive using advanced transclusion techniques. transclude - compile the content ...

  5. python object ( pickled )

    python The main types of built-in objects are numbers , character string , list , Yuan Zu , Dictionaries , Assemble and so on , stay python in , Everything is the object # Pickled in python If we have objects that need persistent storage , And don't lose the type and data of our object , I ...

  6. STL--F - Sequence(n*m-&amp;gt; Previous minimum requirements m Months )

    F - Sequence Time Limit:6000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  7. XD

    subject Whether it is completed or not Topic classification A brief explanation of the problem A dance without a boss (codevs1380) Y Tree form dp dp[u][0] Indicates that this node is not included ,dp[u][1] Means to contain , The transfer equation is dp[u][0]+=max(dp[v] ...

  8. View port usage (lsof,netstat, kill)

    stay Mac You can only use lsof(list open file), Can't use netstat. Check whether a port is being occupied : lsof -i:portno in addition , Can pass : lsof Order to check ...

  9. JavaScript Advanced ( 3、 ... and ) Common tools ( check 、 Universal )

    JS Common tools ( check . Universal ) //  Name verification var checkName = function(name) { //  Check the name of the consignee ( Rules : The name is 2-4 Chinese characters ) var regu = /^[\u4E00- ...

  10. Java8:Lambda Expressions plus Comparator And sort

    1. summary In this tutorial , We are going to learn about the coming JDK 8( Translation notes , Now? JDK 8 It has been published ) Medium Lambda expression —— Especially how to use it to write Comparator And to set (Collection) Arrange ...