老师看看注释中,我对这段代码的理解对吗
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 星