function onReady (func) { if (document.readyState === 'complete') { setTimeout(function () { func(); }, 0); return; } window.addEventListener('load', runCallback, false); function runCallback () { window.removeEventListener('load', runCallback); setTimeout(function () { func(); }, 0); } }
此处是这样一个业务逻辑
- 加入一个回调A
- 如果这个回调还未执行完,又加入了一个回调B,则把B推入队列中,当A执行完后,再执行B
- 如果回调A在执行完后,又加入一个回调C,则是马上执行
var queueAnimation = function () { var animationQueue; return queueAnimation; function queueAnimation(func) { if (animationQueue) { //第二次加入func,则加入队列中 animationQueue.push(func); } else { animationQueue = [func]; //第一次加入func,则直接加入数组中,并执行 flushAnimations(); } } function flushAnimations() { var anim = animationQueue.shift(); if (anim) { onReady(function () { var unlocked = false; function unlock() { // 防止重复解锁,避免执行多次 if (unlocked) { return; } unlocked = true; setTimeout(flushAnimations, 0); //执行下一个动画 }
anim(unlock); }); } else { animationQueue = null; } } }();