初识异步
2019-02-25 本文已影响0人
学的会的前端
异步：
异步：自己不等结果，利用回调函数通知我结果。一般情况下，异步和回调是同时出现的。
同步：自己在等结果
代码展示：
function 排队取号(黄牛){
setTimeout(function(){
黄牛('你的号码是 233')//因为黄牛是一个函数，所以为黄牛，传递参数
},3000)
}
function 黄牛(result){
console.log(result)
}
//var result = 排队取号()//排队取号函数没有return,
//默认返回值undefined
排队取号(黄牛)
具体理解
function 排队取号(通知我){
var id = setTimeout(function f2(){
console.log('通知我(2333)')
},3000)
return id
}
//上面和下面分开看
var 我的号 = undefined
function 通知我(result){
我的号 = result
}
排队取号(通知我)
//排队取号不能直接马上拿到号码，要等3秒
//只能返回排在第几位
//我的号 = 排队取号（）这个代码不能拿到号码，即用同步的方式拿不到号码
//派一个人过去拿号码
//回调是一个套路，不是一个语法
//通知我这个函数就是一个回调函数，因为调用他的目的是给我通知消息，我传给你，你在调回来
//通知我()普通函数
//排队取号(通知我)，此时通知我就是回调函数
面试题：
- 面试题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循环结束后才执行闹钟setTimeout，此时i早就已经变成5了。
- 面试题3：
for(var i = 0; i < 5; i++){
(function(i){ //此时的i是一个新的变量声明
setTimeout(function(){
//打印出来的是function(i)中的i
console.log(i) //每隔一秒打出一个，一共打出0,1,2,3,4
},i*1000) //0s,1s,2s,3s,4s
})(i)//这个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) //同时打出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，因为t1没有返回值
var t3 = i*1000 // 0s,1s,2s,3s,4s
setTimeout(t2,t3) //undefined
}
倒计时器代码：
<body>
<select id = 'mySelect' placeholder = "选择一个时间">
<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>
