老师看看注释中,我对这段代码的理解对吗
function moveTo(el,x,y){
return new Promise(resolve => {
el.style.transform = `translate(${x}px,${y}px)`; //返回的promise实例,如果状态是resolve,就改变el的style
setTimeout(function(){
resolve(); //调用resolve()就是调用下面.then中的匿名函数
},1000);
});
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click',e =>{
moveTo(el,100,100)
.then(function(){ //then方法接收一个参数,即匿名函数,对应到moveTp中的就是resolve()
console.log('第一次移动');
return moveTo(el,200,200);
})
/*
//跟这样写没区别
// .then(function(){
// console.log('第二次移动');
// console.log('第三次移动');
// })
*/
.then(function(){
console.log('第二次移动'); //当没有返回promise实例时,直接.then后面执行匿名函数中的代码,即打印出第二次移动,因为没有改变el样式,也没有定时器,所以跟第一次打印是同时在控制台打印出来
})
.then(function(){
console.log('第三次移动');
});
});正在回答 回答被采纳积分+1
同学你好,理解的不对,参考如下重新理解:
因为同学Promise课程大部分没有学呢,下面老师讲解的,会有听不懂的地方,暂时了解即可。到后面课程都会讲解。
1.当调用moveTo,就会执行new Promise,所以样式设置也就执行了,不是等到resolve之后执行。

resolve成功状态是返回给下一个then的,即下一个then中的回调函数,会等上一个then中的Promise返回状态才会执行。例如如下:
点击按钮时,调用了上面的moveTo函数,所以moveTo中就会返回一个 Promise,并给元素设置了样式。最后执行了一个定时器,1s之后返回了成功状态 ,然后就会执行then中回调函数。

2.then可以接收两个参数,即匿名函数。如果参数是一个函数,那么这个函数就可以叫做回调函数。第一个参数是成功的回调函数,第二个参数是失败的回调函数。即前面的Promise返回成功状态,即执行第一个回调,返回失败状态,执行第二个回调。

3.下面说同时不对,代码不会同时执行。调用then,如果我们自己没有手动返回一个Promise,then也会自动返回一个Promise,这是内部规定好的。所以下一个then会等上一个then返回Promise才会执行。这里同学看着像同时,是因为默认返回的比较快,不像我们前面返回状态放在定时器中,时间要等1s。所以代码顺序执行的比较快,给同学带来一种同时执行的感觉。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星