JS动画实现回调地狱promise的实例代码详解
1. js实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<style>
.ball {
width: 40px;
height: 40px;
margin-bottom: 5px;
border-radius: 20px;
}
.ball1 {
background: red;
}
.ball2 {
background: blue;
}
.ball3 {
background: yellow;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left: 0"></div>
<div class="ball ball2" style="margin-left: 0"></div>
<div class="ball ball3" style="margin-left: 0"></div>
<script>
var ball1 = document.querySelector(".ball1");
var ball2 = document.querySelector(".ball2");
var ball3 = document.querySelector(".ball3");
function animate(ball, left, callback) {
setTimeout(function () {
var marginLeft = parseInt(ball.style.marginLeft, 10);
if (marginLeft === left) {
callback && callback();
} else {
if (marginLeft < left) {
marginLeft += 2;
} else {
marginLeft -= 2;
}
ball.style.marginLeft = marginLeft + "px";
animate(ball, left, callback);
}
}, 13);
}
animate(ball1, 100, function () {
animate(ball2, 200, function () {
animate(ball3, 300, function () {
animate(ball1, 200, function () {
animate(ball3, 200, function () {
animate(ball2, 180, function () {
animate(ball2, 220, function () {
animate(ball2, 200, function () {
console.log("over");
})
})
})
})
})
})
})
});
</script>
</body>
</html>
上述代码就可以实现一个动画。注意下面几点：
•动画的实现往往依赖于setTimeout。
•注意ele.style.marginLeft如果开始能够获取，必须从元素的style中设置了才能获取，否则获取不到。
•利用callback可以实现虽然使用了setTimeout还能串行执行。
但是这产生了回调地狱，代码简单点还好说，一旦代码复杂了，我们将很难处理其中的逻辑。所以这时就可以用到es6中的promise了。
Promise的写法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<style>
.ball {
width: 40px;
height: 40px;
margin-bottom: 5px;
border-radius: 20px;
}
.ball1 {
background: red;
}
.ball2 {
background: blue;
}
.ball3 {
background: yellow;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left: 0"></div>
<div class="ball ball2" style="margin-left: 0"></div>
<div class="ball ball3" style="margin-left: 0"></div>
<script>
var ball1 = document.querySelector(".ball1");
var ball2 = document.querySelector(".ball2");
var ball3 = document.querySelector(".ball3");
function promiseAnimate(ball, left) {
return new Promise(function (resolve, reject) {
function animate(ball, left) {
setTimeout(function () {
var marginLeft = parseInt(ball.style.marginLeft, 10);
if (marginLeft === left) {
resolve();
} else {
if (marginLeft < left) {
marginLeft += 2;
} else {
marginLeft -= 2;
}
ball.style.marginLeft = marginLeft + "px";
animate(ball, left);
}
}, 13);
}
animate(ball,left);
});
}
promiseAnimate(ball1, 500)
.then(function () {
return promiseAnimate(ball2, 200);
})
.then(function () {
return promiseAnimate(ball3, 300);
})
.then(function () {
return promiseAnimate(ball1, 200);
})
.then(function () {
return promiseAnimate(ball3, 200);
})
.then(function () {
return promiseAnimate(ball2, 180);
})
.then(function () {
return promiseAnimate(ball2, 220);
})
.then(function () {
return promiseAnimate(ball2, 200);
})
</script>
</body>
</html>
这同样可以达到效果，并且这样做的好处是，修改更加容易一些。对于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会更好一些。
总结
以上所述是小编给大家介绍的JS动画实现回调地狱promise的实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
NodeJS的Promise的用法解析
Javascript的特点是异步,Javascript不能等待,如果你实现某件需要等待的事情,你不能停在那里一直等待结果回来,相反,底线是使用回调callback:你定义一个函数,这个函数只有等到结果可用时才能被调用. 这种回调模型对于好的代码组织是没有问题的,但是也可以通过从原始回调切换到promise解决很多问题,将promise看成是一个标准的数据容器,这样会简化你的代码组织,可以成为基于promise的架构. 什么是Promise? 一个promise是一个带有".then()"
-
async/await与promise（nodejs中的异步操作问题）
举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa
-
理解JavaScript中Promise的使用
Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验.于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题.本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解. 什么是 Promise 一个 Promise 对象代表一个目前还不可用,但是在未来的
-
异步JavaScript编程中的Promise使用方法
异步? 我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做"已经很清楚"(*￣?￣). 如果你也有类似的情况,没关系,搜索一下这个词,就可以得到大致的说明.在这里,我会对JavaScript的异步做一点额外解释. 看一下这段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Time elap
-
Javascript中Promise的四种常用方法总结
前言 Promise是JavaScript异步操作解决方案,最近看到项目里不少人用了Promise 的库类,比如 bluebird.q .jQuery.Deffered 等 polyfill promise 方式,使用的时候翻看长长的文档,真心累觉不爱. es5 发展到现在,node 在0.12版本就已经支持了promise, 在客户端,大部分浏览器也支持了Promise, 如果要兼容低版本的浏览器,可以加上es5-shim等 polyfill promise.下面话不多说,来一起看看详细的介绍
-
浅谈js promise看这篇足够了
一.背景 大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着.但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入"回调监狱",就容易造成下边的例子: async(1, function(value){ async(value, function(value){ async(value, fu
-
JavaScript Promise 用法
同步编程通常来说易于调试和维护,然而,异步编程通常能获得更好的性能和更大的灵活性.异步的最大特点是无需等待."Promises"渐渐成为JavaScript里最重要的一部分,大量的新API都开始promise原理实现.下面让我们看一下什么是promise,以及它的API和用法! Promises现状 XMLHttpRequest API是异步的,但它没有使用promise API.但有很多原生的 javascript API 使用了promise: *Battery API *fetc
-
微信小程序 es6-promise.js封装请求与处理异步进程
微信小程序 es6-promise.js封装请求与处理异步进程 下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定义封装请求的方法 var Promise = require('../libs/es6-promise.min') function httpsPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reje
-
javascript Promise简单学习使用方法小结
解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Promise交互的主要方式是通过他的then()方法来注册回调函数,去接收Promise的最终结果值 Promise相关的协议有PromiseA和PromiseA+ 定义一个类Promise 定义属性队列queue,初始化空数组[] 定义属性值value,初始化null 定义属性状态status,初始化"pending"(默认值) 定义成员方法getQueue(),返回属性queue 定义成员
-
JS动画实现回调地狱promise的实例代码详解
1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba
-
使用 Node.js 实现图片的动态裁切及算法实例代码详解
背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种
-
Java回调函数实例代码详解
首先说说什么叫回调函数? 在WINDOWS中,程序员想让系统DLL调用自己编写的一个方法,于是利用DLL当中回调函数(CALLBACK)的接口来编写程序,使它调用,这个就 称为回调.在调用接口时,需要严格的按照定义的参数和方法调用,并且需要处理函数的异步,否则会导致程序的崩溃. 这样的解释似乎还是比较难懂,这里举个简 单的例子: 程序员A写了一段程序(程序a),其中预留有回调函数接口,并封装好了该程序.程序员B要让a调用自己的程序b中的一个方法,于是,他通过a中的接口回调自己b中的方法.目的达到
-
JS字符串与二进制的相互转化实例代码详解
JS字符串与二进制的相互转化的方法,具体代码如下所示: //字符串转ascii码,用charCodeAt(); //ascii码转字符串,用fromCharCode(); var str = "A"; var code = str.charCodeAt(); var str2 = String.fromCharCode(code); 十进制转二进制 var a = "i"; console.log(a.charCodeAt()); //105 console.log
-
Vue.js子组件向父组件通信的方法实例代码详解
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文
-
js实现弹出框的拖拽效果实例代码详解
具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&
-
使用 Opentype.js 生成字体子集的实例代码详解
字体子集是将字体文件中部分多余的字符删除,来减小文件大小,从而在 Web 端使用或嵌入到其他应用或系统中,在网上可以找到不少这方面的工具. Opentype.js是一套可以支持浏览器环境和 Node.js 环境的开源 OpenType 字体读写库,利用这个库可以很轻松实现浏览器环境和 Node.js 环境的字体子集功能. 在浏览器环境创建字体子集工具 首先创建一个简单的 HTML界面,包括一个选取字体文件按钮,一个输入框用于输入保留的字符,和一个保存下载按钮. HTML <!DOCTYPE ht
-
jQuery fadeOut 异步实例代码详解
定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id
-
jQuery Ajax 全局调用封装实例代码详解
有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi
-
vue-better-scroll 的使用实例代码详解
首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="item in goods" class="menu-item">