动画函数animation()的实现

动画函数animation()的实现

• 之前面试的时候，面试官向我提出了这个问题，怎么实现动画函数animation()，有这么几个要求：
• 第一，可以链式调用,因为这个函数是类jquery工具库里的函数，因此要可以实现链式调用，像这样 $(“div”).animation().animation()…
• 第二，要求上一个动画执行完成，才开始执行下一个动画，话句话说，必须是第一个animation()执行完，才能执行第二个animation()

我的解决方案

• 首先是链式调用，其实只要在animation()函数里边返回 this,就可以实现链式调用，因此animation的内部代码应该是这样的：

// animation
$.fn = $.prototype = {
	animation:function(){
		/***** 动画的实现 ******/
		return this
	}
}

• 这样就可以实现 animation() 链式调用了，接下来就是解决下一个问题，动画的顺序执行（必须是上一个animation()执行完，才可以执行下一个animation()）
• 话句话说，上一个动画执行的时候，下一个动画就要等待，知道上一个动画执行完了，下一个动画才会开始执行，到这里，我想到了延迟函数 setTimeOut(),就是在上一个动画执行的时候，下一个动画延迟执行，于是 animation() 的内部代码应该是这样的

// animation
$.fn = $.prototype = {
	animation:function(){
		var initTime = 0.3 // 默认动画的执行时间是 0.3s
		var count = this.animation.count++ // 每调用一次 animation() 就会自增一次
		var time = count*initTime*1000 // 动画延迟的时间（毫秒为单位）
		setTimeOut(()=>{
			/***** 动画的实现 ******/
		},time)
		return this
	}
}
// 用来确定延迟的时间，每一次调用 animation() 那么 count就会自增
$.prototype.animation.count = 0

• 这样第一次调用 animation() 的时候，延迟时间为0，第二次调用 animation() 的时候，动画的延迟时间是 300ms，第三次调用的时候，动画的延迟时间就是 600ms，这样就可以实现看起来就像是上一个动画执行结束，下一个动画开始执行，实际上下一个动画是延迟执行了

方案的缺陷

• 实际上 setTimeOut() 这个函数的意思并不是我们想象的那样，会在延迟指定的时间（这个时刻）执行，而是一定会在延迟指定时间之后执行，至于会不会在 那个时刻执行，这就要看看过了指定延迟的时间之后，当前的事件队列执行完了吗，因此使用延迟函数可能会造成这么一个现象，那就是 上一个动画执行完成，过了一段时间，才会执行下一个动画
• 这个方案的本质 是希望延迟函数来准确预测上一个动画执行结束的时机，但是延迟函数不稳定，并不是百分百靠谱
• 因此只要能够获得 上一个动画执行结束的时机，问题就解决了，只要在上一个动画结束的时机开启下一个动画，问题就解决了