当前位置:首页 > jquery

jquery定时

2026-01-16 14:18:44jquery

jQuery 定时方法

jQuery 本身没有专门的定时函数,但可以通过 JavaScript 的 setTimeoutsetInterval 结合 jQuery 操作 DOM 或执行其他任务。

使用 setTimeout 实现单次延迟

$(document).ready(function() {
  setTimeout(function() {
    $("#target").fadeOut();
  }, 2000); // 2秒后执行
});

使用 setInterval 实现循环执行

$(document).ready(function() {
  var counter = 0;
  var interval = setInterval(function() {
    counter++;
    $("#counter").text(counter);
    if (counter >= 10) {
      clearInterval(interval);
    }
  }, 1000); // 每秒执行一次
});

jQuery 动画队列实现定时效果

$("#box").delay(1000).fadeIn(500).delay(2000).fadeOut();

使用 jQuery 的 .animate() 方法

$("#element").animate({
  opacity: 0.5,
  left: "+=50"
}, 2000, function() {
  // 动画完成后的回调
});

清除定时器

var timer = setTimeout(function() {}, 1000);
clearTimeout(timer);

var intervalTimer = setInterval(function() {}, 1000);
clearInterval(intervalTimer);

现代替代方案

对于更复杂的定时任务,推荐使用现代 JavaScript 的 Promise 和 async/await:

async function timedTask() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  $("#result").text("1秒后显示");
}

注意事项

  • 定时器中的 this 上下文可能变化,建议使用箭头函数或绑定上下文
  • 大量定时器可能影响性能,需合理管理
  • 页面隐藏时(如切换到其他标签页),浏览器可能降低定时器精度

jquery定时

标签: jquery
分享给朋友:

相关文章

jquery插件库

jquery插件库

jQuery插件库推荐 jQuery插件库提供了丰富的扩展功能,帮助开发者快速实现常见的前端交互效果。以下是一些常用的jQuery插件库和资源: 1. 官方jQuery插件注册中心jQuery P…

jquery文档

jquery文档

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

jquery插件

jquery插件

jQuery 插件开发指南 jQuery 插件是一种扩展 jQuery 功能的模块化方式,允许开发者封装可重用的代码。以下是开发和使用 jQuery 插件的基本方法。 插件基本结构 jQuery…

jquery下载

jquery下载

jQuery下载方法 官方渠道下载 访问jQuery官网(https://jquery.com/),点击首页的“Download”按钮。页面提供两个版本: Production:压缩版(min…

jquery库

jquery库

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

jquery 面试题

jquery 面试题

jQuery 面试题常见考点 DOM 操作 选择器使用:$("#id"), $(".class"), $("tag") 元素增删改查:append(), remove(), html(),…