关于回调地狱

现在有一个小demo，有四个<div class="ball"></div>，样式是设成一个个小圆球，我们希望小球能一个一个往右移动，但是必须是第一个移动完才能移动第二个，以此类推，移动完4个小球

一般写法，无非就是写一个函数，对函数传参数下表进行递归，可是后期改需求，不是依次移动小球，而是按不同顺序移动，那么，就得写异步回调函数，进行层层嵌套,那么这样写结果如何呢，用回调函数对未来发生一件事结果进行处理，造成①可维护性特别差②可读性特别差③不方便书写

在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱。

解决回调地狱方法我在此介绍一种：Promise

Promise，他是一个ES6新出的对象，一个延迟对象，是用来处理异步操作的，对未来发生的事情的结果，远见规划，要做一件什么事情 【未来发生的事】，如果成功 我要怎么做，如果失败 我要怎么做，就像一个状态机，最重要的是写异步调用的时候更加优雅，更加美观便于阅读，便于后期调试和修改

这里我们用JQuery来写(方法一样)

$(function () {
	var promise = $.Deferred(); // 状态机
	
	function moveBall (selector, left) {
	    var promise = $.Deferred();
	    $(selector).animate({ left: left}, 2000, 'swing', function () {
	        promise.resolve();
	    });
	    return promise;
	}
	
	moveBall('.ball:nth-child(1)', 1000)
	    .then(function () { return moveBall('.ball:nth-child(2)', 1000) })
	    .then(function () { return moveBall('.ball:nth-child(3)', 1000) })
	    .then(function () { return moveBall('.ball:nth-child(4)', 1000) })
	    .then(function () { console.log('运动结束')});
})