promise与settimeout的应用

最新推荐文章于 2024-05-16 15:12:29 发布

小沅白

最新推荐文章于 2024-05-16 15:12:29 发布

阅读量725

点赞数

文章标签： js 队列

本文链接：https://blog.youkuaiyun.com/O0_0O__/article/details/107664422

版权

本文详细介绍了如何使用CSS3实现卡牌翻转效果，并结合JavaScript的setTimeout和Promise处理翻转后的异步操作，如显示提示信息及多卡牌连续翻转的控制流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事情是这样的，我写了一个活动，活动里面有一个卡牌翻转效果，它长这样：

一个典型css3的翻转，与标题看起来并无什么关系。然后我又写了这样三个卡牌的翻转，它长这样：
多张翻转
看起来的步骤是：1.当卡牌翻转完毕之后，显示提示文案。2.当步骤1完成之后，将剩下的卡牌也翻转。跟延迟操扯上关系辽。于是奇怪的博客诞生了。因为没有用到setInterval所以没有说明。

这三者的的理解可以配合一位大佬写的js的事件循环机制和任务队列食用，会理解的更好一点。

setTimeout

settimeout表示指定的毫秒数后调用定义的函数。

settimeout执行的全步骤为：
* 在指定毫秒数后将代码块放入任务队列中等待执行。
* 等待执行栈中的任务执行完毕
* 执行栈中的任务执行完毕后，任务队列中的任务取出放入执行栈中执行。

settimeout应用：单张卡片翻转，当点击的卡片翻转完毕之后，显示提示信息。

	<style>
	@keyframes rotate {//反面从0翻转180度，并隐藏卡片反面
		  100% {
		    transform: rotateY(180deg);
		    display: none;
		  }
		}
	@keyframes rotate1 {//正面从负180翻转到0度
	  0% {
	    transform: rotateY(-180deg);
	  }
	}
	.wraper {
	  width: 148px;
	  height: 250px;
	  cursor: pointer;
	  position: relative;
	}
	.wraper .backface,
	.wraper .open {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	}
	.wraper .backface {
	  background: url("../../img/pc/star_52.png") no-repeat center center;
	  backface-visibility: hidden;
	}
	.wraper .open {
	  background: url("../../img/pc/star_53.png") no-repeat center center;
	}
	.wraper .open .gift {
	  padding-top: 97px;
	  margin-bottom: 14px;
	}
	.wraper .open .gift > div {
	  width: 75px;
	  margin: 0 auto;
	  margin-bottom: 35px;
	}
	li p {
	  width: 108px;
	  font-size: 12px;
	  font-weight: 400;
	  color: #103a5c;
	  line-height: 18px;
	  margin: 0 auto;
	}
	li .tips {
	  color: #cfefff;
	}
	.rotate {// forwards表示动画执行完毕后保持动画最后一秒的状态
	  animation: rotate 1s linear forwards;
	}
	 .rotate1 {
	  animation: rotate1 1s linear forwards;
	}
	</style>
	<div class="wraper" @click="rotate">
         <div :class="[{'rotate1':rotate},'open']">
             <div class="gift">
                 <div>
                     <img src="./activity/img/star_movement/pc/34.png" alt="">
                  </div>
                   <p>
                       奖励内容
                   </p>
             </div>
             <p :class="[{'hidden':rotate1},'tips']">
                    奖励已放入您的账户
                    中请查看使用！
             </p>
         </div>
         <div :class="['backface',{'rotate':rotate}]"></div>
     </div>
    <script>
		new Vue({
			el:'.wraper',
			data:{
			rotate:false,//控制卡片正反面的翻转动画
			rotate1:false//控制提示文案的显示与隐藏
			},
			methods:{
		        rotate() {
		            this.rotate = !this.rotate
		            // var _this = this 
		            if (this.rotate == true) {
		                var tmp = setTimeout(() => {
		                    this.msgtip = this.rotate
		                    clearTimeout(tmp);
		                    }
		                }, 1000);
		            } else {
		                this.rotate1 = this.rotate
		            }
        			},
		})
	</script>

这里使用了settimeout计时器，表示一秒后执行显示提示文案的操作。

promise

用处：
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

用自己理解的话来说，promise就是用于实现你所期望的代码执行顺序。

	var p = new Promise((resolve,reject)=>{
			console.log('code1');
			resolve('code1执行完毕')
	});
	p.then(res=>{
		console.log(res);
		console.log('code2执行完毕')
	})

执行结果：

promise在实例化时，同步代码块被放入主线程的执行栈中执行，并且产生的异步任务被放入任务队列。
而任务队列中的任务总是要等到执行栈的任务全部执行完毕之后才可以执行。
promise应用：多卡牌翻转，选中的卡牌翻转完毕后，剩下的卡牌开始翻转

 <ul class="content">
       <li v-for="(item,i) in cardList">
        <div class="wraper" @click="flop(i,item)">
          <div :class="[{'rotate1':item.rotate},'open']">
                <div class="gift">
                     <div>
                        <img src="./activity/img/star_movement/pc/34.png" alt="">
                     </div>
                </div>
               <p :class="[{'hidden':(!item.msgtip||i!==chooseIndex)},'tips']">
                    奖励已放入您的账户
                    中请查看使用！
                 </p>
          </div>
          <div :class="['backface'，{'rotate':item.rotate&&!item.res}]"></div>
       </div>
    </li>
</ul>

new Vue({
el:'.content',
data:{
 cardList: [{
            rotate: false,
            msgtip: false,
        }, {
            rotate: false,
            msgtip: false,
        }, {
            rotate: false,
            msgtip: false,
        }],
        chooseIndex: null//被选择的卡牌
        },
methods:{
  rotate(obj，fn) {
            console.log(obj)
            obj = obj || null
            obj.rotate = !obj.rotate
            // var _this = this 
            if (obj.rotate == true) {
                var tmp = setTimeout(() => {
                    obj.msgtip = obj.rotate
                    clearTimeout(tmp);
                    if(fn){
                    	fn()
                    }
                }, 1000);
            } else {
                obj.msgtip = obj.msgtip
            }
        },
flop(i,obj){
        // 用户选择的牌翻转完毕以后，将剩下的牌也进行翻转
          var _this = this;
          _this.chooseIndex = i;
           var p = new Promise((resolve, reject) => {
                   _this.rotate(_this.cardList[i], resolve),//翻转选择的卡牌
                })
             p.then(() => {//选择的卡牌翻转完毕之后，将剩下的卡片翻转
                  _this.cardList.forEach((item, index) => {
                      if (index !== i) {
                           _this.rotate(item)
                          }
                          });
                    })
            }
    }
})