问题：设置了定时器，也改成了同步，为什么打印出来的“你成功了”是在最开始就打印了，不应该是等f1执行完在打印吗？
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.div {
width: 510px;
height: 510px;
/* 绝对定位 */
position: absolute;
border: 1px solid red;
}
.flower {
/* 相对定位，是相对原来的位置进行定位 */
position: relative;
left: 400px;
top: 450px;
}
.btn {
margin-top: 500px;
margin-left: 600px;
}
.cute {
position: relative;
left: 0px;
top: 0px;
}
style>
head>
<body>
<div class="div">
<img src="./img/骆驼.svg" alt="" class="cute">
<img src="./img/flower.png" alt="" class="flower">
div>
<button class="btn">向前走button>
<button class="btn1">向下走button>
body>
<script>
var btn = document.querySelector('.btn')
var btn1 = document.querySelector('.btn1')
var cute = document.querySelector('.cute')
var flower = document.querySelector('.flower')
// console.log(flower.offsetLeft);
// console.log(flower.offsetTop);
// console.log(cute.offsetLeft);
// btn.addEventListener('click',function(){
let i = 0
// 执行顺序不同，定时器最后执行
const f1 = async () => {
return new Promise(resolve => {
setInterval(function () {
resolve()
i += 20
if (i < 320) {
cute.style.left = cute.offsetLeft + 30 + 'px'
console.log(cute.offsetLeft);
}
}, 300)
});
}
const f2 = async () => {
await f1()
console.log('你成功了');
}
f2();
// })
btn1.addEventListener('click',function(){
let i = 0
setInterval(function () {
i += 20
if (i < 300) {
cute.style.top = cute.offsetTop + 30 + 'px'
console.log(cute.offsetTop);
}
}, 300)
})
// if(cute.offsetLeft === 450){
// alert('你成功了')
// }
script>
html>
根本原因是因为await实际上是一个让出线程的标志，当程序执行到await f1()时，会先执行f1这个异步函数的300ms延时操作。
这个时候，因为await会让出线程就会转而去执行后面的console.log('你成功了')，等f1的300ms延时时间间隔一到，才会去继续执行f1剩下的操作。