jquery延时函数
jQuery 延时函数
jQuery 提供了多种方式实现延时执行代码的功能,以下是常见的方法:
使用 setTimeout 封装
jQuery 本身没有专门的延时函数,但可以结合原生 JavaScript 的 setTimeout 实现:
// 基础用法
$.delay = function(time, callback) {
setTimeout(callback, time);
};
// 调用示例
$.delay(2000, function() {
console.log('2秒后执行');
});
结合动画队列
通过 delay() 方法和队列实现(适用于动画场景):
$('#element')
.delay(1000) // 延时1秒
.queue(function(next) {
console.log('延时操作');
next();
});
Promise 接口实现
现代 jQuery 版本支持 Promise 写法:
$.Deferred(function(dfd) {
setTimeout(dfd.resolve, 1500);
}).done(function() {
console.log('1.5秒后执行');
});
插件扩展方式
创建可复用的延时插件:
$.fn.delayedAction = function(time, fn) {
return this.each(function() {
setTimeout($.proxy(fn, this), time);
});
};
// 调用示例
$('button').delayedAction(3000, function() {
$(this).hide();
});
注意事项
- 时间参数单位为毫秒(1000ms = 1s)
- 动画队列的
delay()仅适用于后续的动画方法 - 清除延时需要使用
clearTimeout保存计时器ID
清除延时示例
var timer = setTimeout(function(){}, 500);
// 需要取消时
clearTimeout(timer);





