当前位置:首页 > jquery

jquery延时函数

2026-02-04 08:09:05jquery

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);

jquery延时函数

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

相关文章

jquery 菜鸟

jquery 菜鸟

jQuery 入门指南 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下内容适合初学者快速上手。 引入 jQuery 在…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心资源和使用方法整理: jQuery 官方文档 jQuery 官方文档是学习和使用 jQuery 最权威的资源,包含详细的 API 说明、示例和更新日志。…

jquery官网

jquery官网

jQuery 官网地址 jQuery 的官方网站是 https://jquery.com/。该网站提供以下核心内容: 下载 jQuery:提供最新版本的 jQuery 库(压缩版和未压缩版),支持…

jquery实现vue

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具,前者基于 DOM 操作,后者基于数据驱动。虽然 Vue 可以替代 jQuery 的大部分功能,但若需在 Vue 中临时集成 jQuery 或模…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考:包含…

jquery选择器

jquery选择器

jQuery 选择器基础 jQuery 选择器用于选取 DOM 元素,基于 CSS 选择器语法扩展。通过 $() 或 jQuery() 函数调用,返回匹配元素的集合。 常见选择器类型 元素…