jquery定时器
jQuery 定时器实现方法
jQuery 本身不提供独立的定时器功能，但可以通过 JavaScript 原生定时器方法结合 jQuery 操作 DOM。以下是常见的实现方式：
setTimeout 单次定时器
语法格式：
var timer = setTimeout(function() {
// 执行代码
$(selector).doSomething();
}, delayTime);清除方法：
clearTimeout(timer);setInterval 循环定时器
基础用法：
var interval = setInterval(function() {
// 重复执行的代码
$(selector).toggleClass('active');
}, 1000);清除方法：
clearInterval(interval);jQuery 延迟方法
使用 jQuery 的 delay() 与队列结合：
$(selector)
.delay(2000)
.queue(function(next) {
$(this).css('color', 'red');
next();
});动画回调定时
通过动画完成回调实现延时：
$(selector).animate({
opacity: 0.5
}, 500, function() {
// 动画完成后执行
});现代替代方案
考虑使用 requestAnimationFrame：
function animate() {
// 动画逻辑
$('.element').css('left', pos++);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);注意事项
- 定时器函数返回的 ID 需要保存以便清除
- 避免在事件处理中重复创建定时器导致内存泄漏
- 页面隐藏时（如切换标签页）建议暂停定时器
- 长时间运行的定时器建议使用 Web Worker
性能优化建议
对于 DOM 操作密集的场景：
// 使用文档片段减少重绘
var fragment = document.createDocumentFragment();
$(fragment).append('<div>content</div>');
$('#container').append(fragment);对于需要高精度定时的情况：
// 使用性能更高的时间戳计算
var start = Date.now();
function handler() {
var elapsed = Date.now() - start;
if (elapsed < 2000) {
requestAnimationFrame(handler);
}
}
