当前位置:首页 > 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:

jquery定时

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

注意事项

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

标签: jquery
分享给朋友:

相关文章

jquery下载

jquery下载

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

jquery点击事件

jquery点击事件

jQuery 点击事件基础用法 使用 jQuery 绑定点击事件主要通过 .click() 方法或 .on() 方法实现。以下示例展示如何为按钮添加点击事件: // 方法1: 使用 .click()…

在jquery

在jquery

使用 jQuery 的基本方法 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的使用方法。 选择元素 使用…

jquery 特效

jquery 特效

jQuery 特效实现方法 jQuery 提供了丰富的特效方法,可以轻松实现动画、渐变、滑动等效果。以下是一些常见的 jQuery 特效实现方式: 淡入淡出效果 使用 fadeIn() 和 fade…

jquery网页

jquery网页

jQuery 网页开发基础 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。以下是一些 jQuery 在网页开发中的核心…

jquery框架

jquery框架

jQuery框架简介 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互。其核心特点是“写得更少,做得更多”,通过封装常见任务,降低跨浏览器…