jquery 延时

jQuery 延时方法

jQuery 提供了多种方式实现延时操作，以下是几种常见的方法：

使用 setTimeout 与 jQuery 结合

通过原生 JavaScript 的 setTimeout 函数，可以轻松实现延时执行 jQuery 操作：

setTimeout(function() {
    $('#element').fadeIn(); // 延时后执行的操作
}, 2000); // 延时 2000 毫秒（2 秒）

jQuery 的 delay() 方法

delay() 是 jQuery 专门为动画队列设计的延时方法，适用于链式调用：

$('#element')
    .fadeOut(300)
    .delay(1000) // 延时 1 秒
    .fadeIn(300);

自定义延时函数

如果需要更灵活的延时控制，可以封装一个 jQuery 插件：

$.fn.delayedAction = function(callback, delay) {
    var $this = $(this);
    setTimeout(function() {
        callback.call($this);
    }, delay);
    return $this;
};

// 调用示例
$('#element').delayedAction(function() {
    $(this).addClass('active');
}, 1500);

结合 Promise 的延时

现代浏览器支持 Promise，可以结合 jQuery 的 Deferred 实现更复杂的延时逻辑：

function wait(delay) {
    return $.Deferred(function(dfd) {
        setTimeout(dfd.resolve, delay);
    }).promise();
}

wait(2000).then(function() {
    $('#element').toggleClass('highlight');
});

注意事项

• delay() 仅对动画队列有效，不能用于非动画操作。
• setTimeout 是通用的延时方案，但需注意作用域问题。
• 清除延时可以使用 clearTimeout，需保存计时器 ID。