jquery代码链实现延时执行代码的较优雅办法
在网上瞄到篇文章关于 jQuery 中的事件延时执行 ，作者讲的这个菜单问题，之前写一个菜单控件时处理过，有印象。这不是要说的重点，重点是，在jquery代码中，要实现延时执行一段代码，可以有更“jquery style”的写法，比直接用window.setTimeout/window.setInterval这种“江南style”要优雅一点点，即可利用jquery的功能避免延时后执行环境变化带来的问题（需做闭包处理），又可保持jquery链。这种方法就是使用animate()函数及它支持的callback功能。
动画有两个元素，1是要变化的效果，2是变化的时间跨度，如果变化效果取空，那animate就变成一个能延时执行callback的定时器了：
$(this).text(\’It is time to change!\’);//this指针仍是jquery对象所指
});
//试过效果参数用空{}不行，用{\’\’:\’\’}在ie7、8下不行
此外，jquery有一个.delay( duration [, queueName] ) 函数可直接用于动画过程中的延时环节，不过它没有callback参数，不能直接用来做定时器。但是进一步玩味一下，发现可以和queue()/dequeue()联合起来实现更优雅的写法：
$(this).text(\’It is time to change!\’);
});
以下是我把刚好在做的一段代码重构了的例子（实现的是一个动画刷新一串数字的效果）：
$(\’div.numbers\’).each(function (index, div) {
var $div = $(div);
var val = parseInt($div.data(\’value\’));
if (!val)
return;
var steps = getSteps(val);
$div.text(steps[0]);
if (steps.length > 1) {
var interval =20,
stepIndex = 1;
var intervalHandler = window.setInterval(function () {
$div.text(steps[stepIndex]);
if (stepIndex++ == steps.length) {
window.clearInterval(intervalHandler);
delete intervalHandler;
}
else {
$div.animate({ \’fontSize\’: \’72px\’,\’top\’:\’6px\’ }, 30)
.animate({\’fontSize\’:\’64px\’,\’top\’:\’10px\’},20);
}
}, interval);
}
})
//
var animateStep = function ($div) {
var steps = $div.data(\’steps\’),
stepIndex = $div.data(\’stepIndex\’);
$div.text(steps[stepIndex]);
if (++stepIndex < steps.length) {
$div.data(\’stepIndex\’, stepIndex)
.delay(20)
.animate({ \’fontSize\’: \’72px\’, \’top\’: \’-=4px\’, \’left\’: \’-=4px\’ }, 20)
.animate({ \’fontSize\’: \’64px\’, \’top\’: \’+=4px\’, \’left\’: \’+=4px\’ }, 10)
.queue(function () { $div.dequeue();animateStep($div); });
}
}
$(\’div.numbers\’).each(function (index, div) {
var $div = $(div);
var val = parseInt($div.data(\’value\’));
if (!val)
return;
$div.data(\’steps\’, getSteps(val))
.data(\’stepIndex\’, 0);
animateStep($div);
})
//