js定时器使用方法

JavaScript定时器用于延迟或重复执行代码,主要包含setTimeout(延迟执行一次)和setInterval(周期性重复执行),二者均可通过clearTimeout和clearInterval清除,需注意定时器延迟不精确、避免内存泄漏及合理封装使用。

js定时器使用方法

JavaScript定时器用于在指定时间后执行代码,或按固定间隔重复执行。主要有两种定时器:setTimeoutsetInterval,它们都属于浏览器window 对象(在 Node.js 中是 global 对象)。

1. setTimeout:延迟执行一次

在指定毫秒数后执行一次函数,常用于延迟操作。

语法:

setTimeout(function, delay, param1, param2, …)

function:要执行的函数 delay:延迟时间(毫秒) param:传递给函数的参数(可选)

示例:

setTimeout(() => {  console.log("3秒后打印");}, 3000);

清除定时器使用 clearTimeout

const timerId = setTimeout(() => {  console.log("不会执行");}, 2000);// 取消定时器clearTimeout(timerId);

2. setInterval:周期性重复执行

每隔指定时间重复执行函数,适用于轮询、倒计时等场景。

语法:

setInterval(function, interval, param1, param2, …)

interval:重复间隔时间(毫秒)

示例:每秒打印一次

const intervalId = setInterval(() => {  console.log("每秒打印一次");}, 1000);

停止重复执行需调用 clearInterval

// 5秒后停止setTimeout(() => {  clearInterval(intervalId);  console.log("停止重复执行");}, 5000);

3. 注意事项与技巧

定时器的延迟不精确,受浏览器性能、任务队列影响,实际执行可能稍有延迟 避免在循环中直接创建未保存 ID 的定时器,否则无法清除 在组件销毁或页面跳转前务必清除定时器,防止内存泄漏 可以结合 Promise 封装更灵活的延时函数

封装一个延迟函数:

function delay(ms) {  return new Promise(resolve => setTimeout(resolve, ms));}// 使用async function demo() {  console.log("开始");  await delay(2000);  console.log("2秒后执行");}

基本上就这些。掌握 setTimeout 和 setInterval 的基本用法和清除方式,就能应对大多数定时任务需求。

以上就是js定时器使用方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1537687.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JavaScript表格数据实时计算与更新:事件委托实践
上一篇 2025年12月21日 04:21:08
Chart.js 多图表多 Y 轴标签配置详解
下一篇 2025年12月21日 04:21:20

相关推荐

  • 微软开源系统工具PowerToys:一个曾被盖茨下令砍掉的软件

    微软开源系统工具PowerToys:一个曾被盖茨下令砍掉的软件微软开源系统工具PowerToys:一个曾被盖茨下令砍掉的软件微软开源系统工具PowerToys:一个曾被盖茨下令砍掉的软件微软开源系统工具PowerToys:一个曾被盖茨下令砍掉的软件

    晓查 发自 凹非寺 量子位 报道 | 公众号 qbitai 微软最近对Windows系统软件的开源热情高涨,两个月前是计算器,两天前是终端,每次都引发了GitHub上的热潮。 今天,微软再次开源了一款系统软件——PowerToys。没听说过?这很正常,如果你知道它反而显得你年纪大了。 PowerTo…

    2026年8月29日 用户投稿
    100
  • 网易也做了个小红书!

    村长第1114原创 不扯高大上 只讲真实干 感谢关注、评论和转发 各位村民好,我是村长 网易盯上了小红书,也要搞种草社交了。 这是今天刷新闻的时候,看到的一条内容,于是出于职业习惯的去打开看了一下。 果然,网易上线了一个内容分享内的产品叫:网易小蜜蜂。 01 网易小蜜蜂,要做翻版小红书? 网易作为国…

    2026年8月29日
    100
  • 360浏览器如何清除上网痕迹 360浏览器一键清除个人浏览数据方法

    首先使用快捷键Ctrl+Shift+Del可快速清除浏览历史、缓存和Cookie等数据,其次通过右上角菜单进入工具选项也能清理上网痕迹,最后可通过设置中心的隐私与安全功能进行深度管理和自动化清理。 如果您在使用360浏览器时希望保护个人隐私,防止他人查看您的浏览活动,可以通过清除上网痕迹来删除历史记…

    2026年8月29日
    100
  • 智能助手能帮我写代码吗_使用AI编程助手编写和调试代码

    AI编程助手不能取代程序员,它可辅助生成代码、检查错误、补全代码和生成文档,但需人工审核;选择时应考虑语言支持、代码质量、易用性和价格;使用中应避免过度依赖,注意代码安全与隐私。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 当然,智能助手…

    2026年8月29日
    100
  • 新华网财经观察丨当家电拥抱大模型

    新华网财经观察丨当家电拥抱大模型新华网财经观察丨当家电拥抱大模型新华网财经观察丨当家电拥抱大模型新华网财经观察丨当家电拥抱大模型

    ai赋能家电:智能家居新时代来临 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 在人工智能浪潮席卷全球的当下,国内头部家电品牌正积极拥抱“AI+家电”模式,纷纷加大自主研发投入,布局AI大模型技术,同时积极引入DeepSeek等开源大模型,…

    2026年8月29日 用户投稿
    000
  • Java中如何将集合元素连接成一个字符串

    使用String.join()可直接连接字符串集合,Java 8可用Stream API的collect(Collectors.joining())处理任意类型,StringBuilder适合高性能场景。 在Java中,将集合元素连接成一个字符串有多种方式,最常用的是使用 String.join()…

    2026年8月29日
    000
  • 灵活多变创意十足 三星GalaxyZ Flip7解锁自拍新体验

    灵活多变创意十足 三星GalaxyZ Flip7解锁自拍新体验灵活多变创意十足 三星GalaxyZ Flip7解锁自拍新体验灵活多变创意十足 三星GalaxyZ Flip7解锁自拍新体验灵活多变创意十足 三星GalaxyZ Flip7解锁自拍新体验

    在这个视觉内容主导的时代,无论是朋友圈还是各类社交平台,自拍已成为极具吸引力的内容形式之一。人们通过发布状态满分的自拍作品展示个性风格、记录生活点滴,并从中获得更多的认同与互动。正因如此,在不断记录自我的过程中,用户对手机拍摄性能的要求也日益提升。三星galaxyz flip7凭借“立式自由拍摄系统…

    2026年8月29日 用户投稿
    000
  • thinkphp怎么实现分页教程

    ThinkPHP分页的核心在于SQL LIMIT子句,paginate()方法封装了底层数据库查询和数据处理。它允许自定义分页样式和参数,并提供性能优化技巧,如使用缓存、数据库优化和避免N+1问题,以应对复杂的分页场景。 ThinkPHP分页:不止是paginate()那么简单 很多朋友觉得Thin…

    2026年8月29日
    200
  • 关于Windows 10系统重置了但以前的office找不到了问题的解决方法

    关于Windows 10系统重置了但以前的office找不到了问题的解决方法关于Windows 10系统重置了但以前的office找不到了问题的解决方法关于Windows 10系统重置了但以前的office找不到了问题的解决方法关于Windows 10系统重置了但以前的office找不到了问题的解决方法

    关于windows 10系统重置后无法找到之前的office软件的解决方案,首先需要在微软官网登录自己的windows账户,确认账户中是否有记录的设备信息。如果没有,请使用微软账号登录windows系统。接着,访问office官网,检查账户下是否有office设备记录。如果没有找到,请在电脑上搜索w…

    2026年8月29日 用户投稿
    400
  • Android WebView无法加载alipays://协议链接怎么办?

    Android WebView加载alipays://协议链接失败的解决方案 在Android开发中,WebView有时无法加载自定义URL scheme,例如alipays://,导致出现net::err_unknown_url_scheme错误,即使重写了shouldOverrideUrlLoa…

    2026年8月29日
    100
  • 曝苹果iPhone 17 Air将主打蓝色 秋季发布 颜值稳了?

    据海外媒体报道,苹果即将推出的iphone 17 air在配色方面或将带来全新选择。这款机型或将主打一种前所未有的浅蓝色,成为苹果历史上最具辨识度的蓝色版本。 根据爆料信息,这种蓝色调非常淡雅,呈现出接近白灰色的视觉效果,在较暗环境下甚至可能被误认为是白色。如果消息属实,这将是继iPhone 13 …

    2026年8月29日
    100
  • Win10系统任务栏变白色怎么办?任务栏变白色修复方法

    最近有不少将系统升级到win10 1909版本的用户反馈,原本黑色的任务栏不知为何突然变成了白色。那么,当win10 1909系统的任务栏变成白色时该如何解决呢?接下来,小编为大家介绍一种修复此问题的方法,大家不妨一试。 具体操作步骤如下: 首先,打开设备,进入系统的设置界面; 接着,找到并点击“个…

    2026年8月29日
    000
  • Win10系统出现ntkrnlmp.exe蓝屏如何解决?

    Win10系统出现ntkrnlmp.exe蓝屏如何解决?Win10系统出现ntkrnlmp.exe蓝屏如何解决?Win10系统出现ntkrnlmp.exe蓝屏如何解决?Win10系统出现ntkrnlmp.exe蓝屏如何解决?

    ntldr.exe是什么?win10系统出现ntldr.exe蓝屏又是怎么回事?有用户反馈自己的电脑出现ntldr.exe蓝屏,即使重装系统也未能解决问题,这该如何处理呢?接下来我们就一起看看问题的分析与解决办法吧。 什么是NTLDR.exe? Ntlr代表NT装载程序,它是Windows系统中合法…

    2026年8月29日 用户投稿
    100
  • win11怎么开启卓越性能模式_win11开启卓越性能模式操作教程

    通过管理员终端执行powercfg命令可启用隐藏的“卓越性能”模式;2. 若未显示,可通过设置应用刷新电源选项列表;3. 使用搜索功能可快速以管理员身份运行终端完成操作。 如果您发现Windows 11的电源选项中缺少“卓越性能”模式,导致无法最大化发挥硬件性能,可以通过系统内置命令手动启用该隐藏的…

    2026年8月29日
    700
  • 教你如何删除与小娜日常对话的转存录音的方法

    近期有报道指出,包括微软、谷歌、苹果和亚马逊在内的多家科技巨头,均利用数字助手类应用收集用户的对话内容,并通过人工方式进行分析。这意味着,你在使用微软小娜(cortana)或其他类似服务时的语音交互内容可能会被保存下来,随后由相关公司委托的第三方机构负责监听并解读内容。尽管谷歌、苹果和亚马逊在这一隐…

    2026年8月29日
    100
  • 在悟空浏览器上怎么免费看电视剧 免会员看剧资源获取方法

    免费看电视剧的关键在于选择合适的资源渠道而非依赖悟空浏览器本身,可通过正版平台免费专区、聚合类影视app、第三方网站、bt下载或短视频平台获取资源,但需注意版权、安全、广告和画质等风险,为安全追剧应优先选择正规渠道、安装杀毒软件、谨慎点击链接、保护个人信息并使用广告拦截插件,同时解决卡顿问题可检查网…

    2026年8月29日
    100
  • ThinkPHP 队列(Queue)与异步任务处理

    在thinkphp中,可以使用队列来处理异步任务。具体方法包括:1.定义任务类并实现fire方法;2.使用queue::push方法将任务推送到队列中;3.通过配置驱动(如redis或数据库)来管理和执行任务。这种方式可以有效提升应用性能和用户体验。 引言 在现代Web开发中,异步任务处理和队列管理…

    2026年8月29日
    100
  • ThinkPHP 6 环境配置(Nginx/Apache + PHP 8)

    配置 thinkphp 6 环境需要在 nginx 或 apache 上结合 php 8 进行设置。1) nginx 配置:编辑 nginx.conf 文件,设置 server 块以正确处理 php 文件。2) apache 配置:在 httpd.conf 文件中添加 virtualhost 配置,…

    2026年8月29日
    200
  • 谷歌相机隐私设置详解_谷歌相机个人隐私保护功能与配置指南

    谷歌相机可能泄露位置信息,因默认开启地理标记功能,建议关闭“保存位置信息”并限制应用权限,同时谨慎使用Google Photos的面孔分组与备份功能,确保账号安全及分享时剥离敏感元数据。 谷歌相机在我们的日常生活中扮演着越来越重要的角色,它不仅仅是一个拍照工具,更是一个数据收集的入口。关于它的隐私设…

    2026年8月29日
    600
  • Mac+IDEA+百度富文本UEditor

    Mac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditor

    最近,我在项目中需要嵌入一个富文本编辑器,考虑到百度ueditor的强大功能,决定使用它。然而,从%ignore_a_1%+eclipse环境转到mac+idea后,遇到了几个问题。经过一番努力,终于解决了这些问题,现分享我的经验。 环境:Mac + IDEA + UEditor 基于 Maven+…

    2026年8月29日 用户投稿
    200

发表回复

登录后才能评论
关注微信