jquery定时
jQuery 定时方法
jQuery 本身没有专门的定时函数,但可以通过 JavaScript 的 setTimeout 和 setInterval 结合 jQuery 操作 DOM 或执行其他任务。
使用 setTimeout 实现单次延迟
$(document).ready(function() {
setTimeout(function() {
$("#target").fadeOut();
}, 2000); // 2秒后执行
});
使用 setInterval 实现循环执行
$(document).ready(function() {
var counter = 0;
var interval = setInterval(function() {
counter++;
$("#counter").text(counter);
if (counter >= 10) {
clearInterval(interval);
}
}, 1000); // 每秒执行一次
});
jQuery 动画队列实现定时效果
$("#box").delay(1000).fadeIn(500).delay(2000).fadeOut();
使用 jQuery 的 .animate() 方法
$("#element").animate({
opacity: 0.5,
left: "+=50"
}, 2000, function() {
// 动画完成后的回调
});
清除定时器
var timer = setTimeout(function() {}, 1000);
clearTimeout(timer);
var intervalTimer = setInterval(function() {}, 1000);
clearInterval(intervalTimer);
现代替代方案
对于更复杂的定时任务,推荐使用现代 JavaScript 的 Promise 和 async/await:
async function timedTask() {
await new Promise(resolve => setTimeout(resolve, 1000));
$("#result").text("1秒后显示");
}
注意事项
- 定时器中的 this 上下文可能变化,建议使用箭头函数或绑定上下文
- 大量定时器可能影响性能,需合理管理
- 页面隐藏时(如切换到其他标签页),浏览器可能降低定时器精度







