jquery 定时

jQuery 定时方法

jQuery 提供了多种方式实现定时操作，包括延迟执行、循环执行等。以下是常见的几种方法：

使用 setTimeout 实现延迟执行

setTimeout 是 JavaScript 原生方法，jQuery 中可以直接调用。用于在指定时间后执行一次函数。

// 延迟 2 秒后执行
setTimeout(function() {
    alert("延迟 2 秒执行");
}, 2000);

使用 setInterval 实现循环执行

setInterval 同样是 JavaScript 原生方法，用于每隔一段时间重复执行函数。

// 每隔 1 秒执行一次
var interval = setInterval(function() {
    console.log("每隔 1 秒执行");
}, 1000);

// 停止循环执行
clearInterval(interval);

使用 jQuery 的 delay 方法

jQuery 的 delay 方法主要用于动画队列的延迟，通常与 queue 或动画方法（如 fadeIn）配合使用。

$("#element").delay(2000).fadeIn(); // 延迟 2 秒后淡入

使用 animate 实现定时动画

jQuery 的 animate 方法可以通过设置 duration 参数实现定时动画效果。

$("#element").animate({
    opacity: 0.5,
    left: "+=50"
}, 1000); // 1 秒内完成动画

使用 queue 和 dequeue 控制定时队列

通过 queue 和 dequeue 可以自定义定时执行的函数队列。

$("#element").queue(function(next) {
    setTimeout(function() {
        console.log("队列任务 1");
        next(); // 执行下一个队列任务
    }, 1000);
}).queue(function(next) {
    setTimeout(function() {
        console.log("队列任务 2");
        next();
    }, 1000);
});

使用 promise 实现异步定时

jQuery 的 promise 方法可以配合 setTimeout 实现更复杂的异步定时逻辑。

$.when($.Deferred(function(dfd) {
    setTimeout(dfd.resolve, 2000);
})).done(function() {
    console.log("2 秒后执行");
});

注意事项

• setTimeout 和 setInterval 是 JavaScript 原生方法，不是 jQuery 特有，但可以在 jQuery 代码中使用。
• delay 方法仅适用于 jQuery 动画队列，不适用于普通函数延迟。
• 使用 setInterval 时要注意清除定时器（clearInterval），避免内存泄漏。
• 动画定时可以通过 animate 的 duration 参数控制，无需额外定时器。