当前位置：首页 > jquery

jquery延时函数

2026-03-17 05:14:11jquery

jQuery 延时函数

jQuery 提供了多种方法来实现延时操作，包括延时执行代码、延时动画效果等。以下是几种常见的 jQuery 延时函数及其用法：

setTimeout

setTimeout 是 JavaScript 原生函数，可以与 jQuery 结合使用来实现延时操作。语法如下：

setTimeout(function() {
    // 延时执行的代码
}, delayTime);

示例：延时 2 秒后隐藏一个元素：

setTimeout(function() {
    $('#element').hide();
}, 2000);

delay

delay 是 jQuery 提供的专门用于延时动画队列的方法，适用于动画效果（如 fadeIn、fadeOut、slideUp 等）。语法如下：

$(selector).delay(duration).queue(function(next) {
    // 延时执行的代码
    next();
});

示例：延时 1 秒后淡出一个元素：

$('#element').delay(1000).fadeOut();

结合动画队列

delay 通常与动画方法一起使用，例如：

$('#element').fadeIn(500).delay(1000).fadeOut(500);

这段代码会让元素淡入 0.5 秒，延时 1 秒后再淡出 0.5 秒。

clearTimeout

如果需要取消延时操作，可以使用 clearTimeout。首先需要保存 setTimeout 的返回值：

var timeoutId = setTimeout(function() {
    $('#element').hide();
}, 2000);

// 取消延时
clearTimeout(timeoutId);

自定义延时函数

可以封装一个自定义的 jQuery 延时函数，方便复用：

jquery延时函数

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

// 使用示例
$('#element').delayFunction(2000, function() {
    $(this).hide();
});