博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js动画实现&&回调地狱&&promise
阅读量:6316 次
发布时间:2019-06-22

本文共 926 字,大约阅读时间需要 3 分钟。

1. js实现动画

    
animate

上述代码就可以实现一个动画。注意下面几点:

  • 动画的实现往往依赖于setTimeout。
  • 注意ele.style.marginLeft如果开始能够获取,必须从元素的style中设置了才能获取,否则获取不到。
  • 利用callback可以实现虽然使用了setTimeout还能串行执行。

但是这产生了回调地狱,代码简单点还好说,一旦代码复杂了,我们将很难处理其中的逻辑。所以这时就可以用到es6中的promise了。

 

 

 

Promise的写法如下:

    
animate

这同样可以达到效果,并且这样做的好处是,修改更加容易一些。对于promise,有几点需要注意:

  1. 在执行promise相关函数的时候,要返回一个promise对象,这是常用的做法。
  2. 只有返回了promise对象,我们才能实用then。
  3. 并且在then中还要返回promise对象,这样我们就可以不断的使用then()来管理异步。
  4. 在promise执行之后,要使用resolve()来表明这个promise执行的结束。 这样,才能执行then方法。

问题: 在then中如果直接执行promiseAnimate(ball2, 200);不可以吗?  为什么一定要return呢?

答: 当然不可以,因为如果直接执行,确实返回了一个promise对象,但是这个promise对象只是在then下面的函数中啊, 我们必须在这个函数继续返回这个promise对象才能达到继续使用then的目的。

 

其中resolve()代表着这个异步过程的结束。

 

综上所述: 动画多用setTimeout和调用自己的方式执行,当然,使用setInterval也是一样的,只是前者我们更为推荐。 无论是使用setTimeout还是setInterval,都不可避免的会产生如果解决异步的问题。 之前我们解决异步的方式是使用回调函数,但是回调函数非常容易就会产生回调地狱,所以用promise会更好一些。

 

转载地址:http://nekaa.baihongyu.com/

你可能感兴趣的文章
使用.NET进行高效率互联网敏捷开发的思考和探索【一、概述】
查看>>
切换默认Activity和Fragment的动画
查看>>
SSM练习——登录实现
查看>>
asp.net core 2.0 Microsoft.Extensions.Logging 文本文件日志扩展
查看>>
余光中_百度百科
查看>>
方法sessionjsp之监听器
查看>>
判断 网络是否通常,以及判断用户使用的网络类型,时2G\3G\还是wifi
查看>>
下一代 Hadoop YARN :相比于MRv1,YARN的优势
查看>>
阿里巴巴离职DBA 35岁总结的职业生涯
查看>>
LOT NUMBER / PO / RECEIPT NO Relation.
查看>>
Fedora9常用网络调试
查看>>
Matlab绘图方法汇总
查看>>
关于操作系统的进程调度问题
查看>>
POJ 1243 One Person
查看>>
Bash: about .bashrc, .bash_profile, .profile, /etc/profile, etc/bash.bashrc and others
查看>>
hibernate 映射实例 学生 课程 成绩
查看>>
【CAS单点登录视频教程】 第04集 -- tomcat下配置https环境
查看>>
自适应网页布局经验
查看>>
Ubuntu apache 禁止目录浏览
查看>>
常用脚本--归档ERRORLOG
查看>>