当前位置:首页 > jquery

jquery延时函数

2026-02-04 08:09:05jquery

jQuery 延时函数

jQuery 提供了多种方式实现延时执行代码的功能,以下是常见的方法:

使用 setTimeout 封装

jQuery 本身没有专门的延时函数,但可以结合原生 JavaScript 的 setTimeout 实现:

jquery延时函数

// 基础用法
$.delay = function(time, callback) {
    setTimeout(callback, time);
};

// 调用示例
$.delay(2000, function() {
    console.log('2秒后执行');
});

结合动画队列

通过 delay() 方法和队列实现(适用于动画场景):

jquery延时函数

$('#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);

标签: 函数jquery
分享给朋友:

相关文章

jquery 之家

jquery 之家

jQuery 之家相关资源 jQuery 之家是一个提供 jQuery 插件、教程和代码示例的中文资源网站。以下是关于 jQuery 之家的一些有用信息: 网站内容 提供丰富的 jQuery 插件…

jquery属性

jquery属性

jQuery 属性操作 jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以用于获取、设置、修改或删除元素的属性。 获取属性值 使用 attr() 方法可以获取指定属性的值。例如,…

jquery标签

jquery标签

jQuery 标签操作 jQuery 提供了多种方法来操作 HTML 标签(元素),包括创建、修改、删除和遍历等。以下是常用的 jQuery 标签操作方法: 选择标签 使用选择器获取 HTML 元素…

jquery加载

jquery加载

jQuery 加载方法 使用 CDN 加载 jQuery 推荐通过公共 CDN(如 Google、Microsoft 或 jQuery 官方)加载,速度快且可能已被浏览器缓存。 <scri…

jquery隐藏

jquery隐藏

jQuery 隐藏元素的方法 使用 jQuery 隐藏元素可以通过多种方式实现,以下是几种常见的方法: hide() 方法hide() 是最简单的隐藏元素方法,它会将元素的 display 属性设置…

jquery效果

jquery效果

jQuery 动画效果 jQuery 提供了多种内置动画效果,可用于实现平滑的页面交互。常用的方法包括 show()、hide()、toggle()、fadeIn()、fadeOut()、slideU…