老师看看注释中,我对这段代码的理解对吗

老师看看注释中,我对这段代码的理解对吗

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

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕夭夭 2020-07-09 09:39:18

同学你好,问题解答如下:

  1. 对,还有注意代码不是同时执行,是顺序执行。

  2. 理解的正确。另外,resolve和reject后面会讲解的,建议跟着课程详细学习哦。课程地址如下:

    https://class.imooc.com/lesson/817#mid=20432


祝学习愉快~

好帮手慕夭夭 2020-07-08 10:33:01

同学你好,理解的不对,参考如下重新理解:

因为同学Promise课程大部分没有学呢,下面老师讲解的,会有听不懂的地方,暂时了解即可。到后面课程都会讲解。

1.当调用moveTo,就会执行new Promise,所以样式设置也就执行了,不是等到resolve之后执行。

http://img1.sycdn.imooc.com//climg/5f052cfd09e0fc6209630180.jpg

resolve成功状态是返回给下一个then的,即下一个then中的回调函数,会等上一个then中的Promise返回状态才会执行。例如如下:

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

http://img1.sycdn.imooc.com//climg/5f052e0209baa9c607770129.jpg

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

http://img1.sycdn.imooc.com//climg/5f052eb4097df65f08280081.jpg

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

http://img1.sycdn.imooc.com//climg/5f0530050981ca3510970116.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 hyperse #1
    谢谢老师,也就是说注释中的理解主要不对的地方是这一行对吗:el.style.transform = `translate(${x}px,${y}px)`; //返回的promise实例,如果状态是resolve,就改变el的style
    2020-07-08 23:31:22
  • 提问者 hyperse #2
    然后整个代码的执行顺序是当调用moveTo,就会执行new Promise,执行样式设置,其次是定时器,最后再执行1s之后返回了成功状态 ,执行then中回调函数。 还有一个问题就是这里好像都只写了如果promise从pending到resolve的代码,如果同时又resolve跟reject又该如何写呢?
    2020-07-08 23:34:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师