当前位置:首页 > 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 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少,做得更多”(Write L…

jquery实现

jquery实现

以下是关于jQuery实现的常见应用场景及方法,分为核心功能模块说明: DOM操作 使用$()选择器获取元素后,可通过链式调用方法操作DOM: $('#element').html('新内容').…

jquery属性

jquery属性

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

jquery加载

jquery加载

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

jquery li

jquery li

jQuery 操作 <li> 元素的方法 jQuery 提供了多种方法来操作 HTML 中的 <li> 元素(列表项)。以下是常见的使用场景和示例: 选择 <li&…

jquery 导航

jquery 导航

jQuery 导航实现方法 使用jQuery创建动态导航菜单 通过jQuery可以轻松实现导航菜单的动态效果,如下拉菜单、滑动菜单等。以下是一个基础的下拉导航实现示例: <ul class=…