異步：
異步：自己不等結(jié)果，利用回調(diào)函數(shù)通知我結(jié)果。一般情況下，異步和回調(diào)是同時(shí)出現(xiàn)的。
同步：自己在等結(jié)果
代碼展示：
function 排隊(duì)取號(hào)(黃牛){
setTimeout(function(){
黃牛('你的號(hào)碼是 233')//因?yàn)辄S牛是一個(gè)函數(shù)，所以為黃牛，傳遞參數(shù)
},3000)
}
function 黃牛(result){
console.log(result)
}
//var result = 排隊(duì)取號(hào)()//排隊(duì)取號(hào)函數(shù)沒有return,
//默認(rèn)返回值undefined
排隊(duì)取號(hào)(黃牛)
具體理解
function 排隊(duì)取號(hào)(通知我){
var id = setTimeout(function f2(){
console.log('通知我(2333)')
},3000)
return id
}
//上面和下面分開看
var 我的號(hào) = undefined
function 通知我(result){
我的號(hào) = result
}
排隊(duì)取號(hào)(通知我)
//排隊(duì)取號(hào)不能直接馬上拿到號(hào)碼，要等3秒
//只能返回排在第幾位
//我的號(hào) = 排隊(duì)取號(hào)（）這個(gè)代碼不能拿到號(hào)碼，即用同步的方式拿不到號(hào)碼
//派一個(gè)人過去拿號(hào)碼
//回調(diào)是一個(gè)套路，不是一個(gè)語(yǔ)法
//通知我這個(gè)函數(shù)就是一個(gè)回調(diào)函數(shù)，因?yàn)檎{(diào)用他的目的是給我通知消息，我傳給你，你在調(diào)回來(lái)
//通知我()普通函數(shù)
//排隊(duì)取號(hào)(通知我)，此時(shí)通知我就是回調(diào)函數(shù)
面試題：
- 面試題1：
for(var i = 0; i < 5; i++){
console.log(i) //0,1,2,3,4
}
- 面試題2：
for(var i = 0; i < 5; i++){
setTimeout(function(){
console.log(i) // 5
},1000*i) // 0s-5,1s-5,2s-5,3s-5,4s-5
}
//for循環(huán)結(jié)束后才執(zhí)行鬧鐘setTimeout，此時(shí)i早就已經(jīng)變成5了。
- 面試題3：
for(var i = 0; i < 5; i++){
(function(i){ //此時(shí)的i是一個(gè)新的變量聲明
setTimeout(function(){
//打印出來(lái)的是function(i)中的i
console.log(i) //每隔一秒打出一個(gè)，一共打出0,1,2,3,4
},i*1000) //0s,1s,2s,3s,4s
})(i)//這個(gè)i的值賦值給了function(i)
}
- 面試題4：
for(var i = 0; i < 5; i++){
(function(){
setTimeout(function(){
console.log(i) //5,5,5,5,5
},i*1000) //0s,1s,2s,3s,4s
})(i)
}
- 面試題5：
for(var i = 0; i < 5; i++){
setTimeout(function(i){
console.log(i) //同時(shí)打出0,1,2,3,4
}(i),i*1000);
}
//代碼改寫
for(var i = 0;i < 5; i++){
var t1 = function(i){
console.log(i)
}
var t2 = t1(i) //undefined,t1的返回值是undefined，因?yàn)閠1沒有返回值
var t3 = i*1000 // 0s,1s,2s,3s,4s
setTimeout(t2,t3) //undefined
}
倒計(jì)時(shí)器代碼：
<body>
<select id = 'mySelect' placeholder = "選擇一個(gè)時(shí)間">
<option value = "1" selected>1分鐘</option>
<option value = "5">5分鐘</option>
<option value = "10">10分鐘</option>
<option value = "20">20分鐘</option>
</option>
</select>
<button id = "startButton">start</button>
<button id = "pauseButton" disabled>pause</button>
<button id = "resumeButton" disabled>resume</button>
<div id="output">
</div>
<script>
var timeLeft = 10
let lastTimerId
function showTime(){
outputDiv.textContext = timeLeft + '秒'
if(timeLeft === 0){
return
}
timeLeft -= 1
lastTimerId = setTimeout(showTime,1000)
}
startButton.onclick = function(){
var vaolueNumber = parseInt(mySelect.value,10)
var seconds = valueNumber * 60
timeLeft = seconds
if(lastTimerId){
window.clearTimeout(lastTimerId)
}
showTime()
}
pauseButton.onclick = function(){
if(lastTimerId){
window.clearTimeout(lastTimerId)
resumeButton.disabled = false
pauseButton.disabled = true
}
}
resumeButton.onclick = function(){
showTime()
pauseButton.disabled = false
resumeButton.disabled = true
}
</script>
</body>
