sticky连续快速点击，还会出现重复生成sticky

Question

老师好！又来麻烦老师。
老师，这节课的逻辑可以理解，代码也实现了。只是在快速连续点击sticky的时候，还是会重复生成sticky。而且，点击sticky，在sticky隐藏后，需要点击第二次，才能再次弹出shop-cart-list。
另外，老师，我用create-api方式做的cart-control小球抛物线过渡动画效果。小球在shop-cart中创建并执行过渡动画，同时绑定动画结束事件，监听到动画结束后自动销毁。可是经常会出现小球在display:none以后，无法自动销毁的现象。重新整理了逻辑，没能查出问题，恳请老师施以援手。
辛苦老师了！这是项目存放地址：链接描述

Answer 1

ustbhuangyi 2020-06-30 11:18:10

你的 ShopCartList 组件应该用 popupMixins 来管理弹窗的关闭，你出现的问题是因为点击购物车关闭ShopCartList 的时候没有触发 hide 事件。快速连续点击可能会出现多个，但关系不大，只有保证逻辑正确即可，当然，你去删除这个节点也是可以的。

小球用 createAPI 实现这个思路很赞，我目前跑你的代码似乎没有出现无法销毁小球的情况，即使快速点击，在小球动画做完后也能正常销毁。

• 提问者 Walker游游 #1

  老师好，
  您是说，动画过程中不允许创建新的ShopCartList，保证动画结束、调用hide()之前不会打断这一过程，或者每次动画结束后销毁节点。理解有点笨，不知道是不是您说的popupMixins。
  然后小球那个，谢谢老师夸奖！能得到老师肯定，很开心，哈哈哈哈！小球无法销毁的现象，，，有点儿玄幻。。。我试试录个gif或者视频捕捉一下。上传到项目public下，之后再请老师您看一下。

• 提问者 Walker游游 #2

  老师好，我把捕捉到的视频推送到项目中了，您方便的时候看一下。

• ustbhuangyi 回复 提问者 Walker游游 #3

  因为外层监听了 hide 事件重置 this.listFold = true，所以你要保证组件关闭触发这个事件

点开查看后面2条评论