jquery代码链实现延时执行代码的较优雅办法

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_34115824

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量75

点赞数

文章标签： javascript ViewUI

本文深入探讨了jQuery中实现延时执行的技巧，并通过实例展示了如何利用animate()函数及其callback功能，优雅地解决动画与延时执行问题。通过分析原始代码与重构代码，阐述了如何优化动画刷新数字串的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上瞄到篇文章关于 jQuery 中的事件延时执行，作者讲的这个菜单问题，之前写一个菜单控件时处理过，有印象。这不是要说的重点，重点是，在jquery代码中，要实现延时执行一段代码，可以有更“jquery style”的写法，比直接用window.setTimeout/window.setInterval这种“江南style”要优雅一点点，即可利用jquery的功能避免延时后执行环境变化带来的问题（需做闭包处理），又可保持jquery链。这种方法就是使用animate()函数及它支持的callback功能。

动画有两个元素，1是要变化的效果，2是变化的时间跨度，如果变化效果取空，那animate就变成一个能延时执行callback的定时器了：

$div.animcate({'top':'+=0'},1000,'linear', function(){
$( this).text('It is time to change!'); // this指针仍是jquery对象所指
});

//试过效果参数用空{}不行，用{'':''}在ie7、8下不行

此外，jquery有一个.delay( duration [, queueName] ) 函数可直接用于动画过程中的延时环节，不过它没有callback参数，不能直接用来做定时器。但是进一步玩味一下，发现可以和queue()/dequeue()联合起来实现更优雅的写法：

$div.delay(1000).queue( function(){
$( this).text('It is time to change!');
});

以下是我把刚好在做的一段代码重构了的例子（实现的是一个动画刷新一串数字的效果）：

View Code

// 原来的代码，使用raw api -- window.setInterval
$( ' 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);
    }
})
//

View Code

// 重构后的代码
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);
})
//