定时器JS深入理解解读

news/2025/2/24 10:32:25/文章来源:https://www.cnblogs.com/GJ504b/p/18566548

set&clear interval&timeout

相信不论是老油条还是新手小白,你早就听过或者用过setIntervalsetTimeout这俩哥们儿和他们的死敌clearIntervalclearTimeout了吧,作为项目里的“老面孔”和面试高频考点,今天GJ504b就带大家深入解读这四大活宝😀


setInterval/setTimeout的统一语法

setInterval/setTimeout(函数,毫秒数)

这里的函数可以是匿名函数,IFFE

注意:函数是由定时器执行的,所以只写函数名【函数名+() 代表直接执行,相当于定时器写了个寂寞

Talking is cheap,show u the codes!

function example(){document.write(Haha);
}
//example();//这样写函数已经被调用了,你定时器将失效哦~
setInterval(example,1000);//right!

预备知识

JS是一个单线程的家伙

  1. 啥是单线程?
    嘻嘻,又到了学习语文的时候啦

    单线程☞同一时间只能做一件事情,也就是说,所有的任务需要排队,前一个任务执行完后,才可以执行下一个任务

    事件队列主线程,其中事件队列包括:定时器,ajax等等,他们遵循先进先出的原则,而主线程则第一按序执行
    img

  2. 为什么它要有单线程属性?
    为了提高用户体验感
    你也不想自己的操作被程序多线程操作之后由于顺序的随机而面目全非吧😀

  3. 我知道这个有啥用?
    maybe 面试会被问到┏┛墓┗┓...(((m -__-)m
    多知道一点准没坏处滴,将来也好看AI的代码👻

setInterval

HR:setInterval是什么意思?
U:指-->间歇调用,调用,将定时任务处理的函数添加到执行队列的队尾

说人话就是调用函数每n次(n是你规定的毫秒数)

Talking is cheap,show u the codes!


function example(){document.write("我每隔一秒出现一次~");
}
setInterval(example,1000);

setTimeout

HR:setTimeout是什么意思?
U:指-->超时调用,调用,将定时任务处理的函数添加到执行队列的队尾

说人话就是过了n后,调用一次你的函数(n是你规定的毫秒数)


function example(){document.write("我1s之后只出现一次~");
}
setInterval(example,1000);

clearInterval和clearTimeout语法

先把之前写的set某某赋给一个变量x
然后
结合事件执行(比如点击按钮[btn]清除间歇调用)
btn.onclick = function(){ clearInterval(x); }
btn.onclick = function(){ clearTimeout(x); }

clearInterval

clearTimeout

你大概懂了?来看看3道面试题

(1)执行几次?输出结果?
for (var i=0; i<5; i++){setTimeout(function(){console.log(i);
},1000);
}
(2)这个函数的功能是什么?
for(let i=0; i<3; i++){setTimeout(function(){console.log(i);
},1000*i);
}
(3)输出结果?setTimeout(function(){console.log(i);
},1000);答案(1)打印5次5//这里由于var是全局变量,变量提升,但是如果改成ES6标准的let就是输出 0 1 2 3 4(2)每个1s打印1, 2, 3.....//同理,如果改成var,就是打印3次3(3)b a c

用这四个哥们儿做玩具

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/840602.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

not in 和 not exists 比较和用法

尽量不要使用not in(它会调用子查询),而尽量使用not exists(它会调用关联子查询)。查询语句使用了not in,那么对内外表都进行全表扫描,没有用到索引;而not exists的子查询依然能用到表上的索引。所以无论哪个表大,用not exists都比not in 要快。 NOT IN 查询返回空结果:…

Flash动画综合设计并发布、嵌入到网页

【作业要求】 自己选定主题,创意制作Flash动画,并与网页进行集成 【实验环境】 l 所需硬件环境为微机; l 所需软件环境为VS code 【创意内容】 因为我比较爱国,所以我选定的主题都是关于国旗的【关键步骤】 1、选好想要做的内容,找到一些视频; 2、查找关于任如何在浏览器…

洛谷P11290 【MX-S6-T2】「KDOI-11」飞船

Problem本题开启Special Judge,无需考虑精度问题Solve 一开始想到这个用DP写,但是不知道怎么定义 去"提交记录"旁边的神秘按钮得知速度可以作为第二维,且类似于背包 那么我们就可以按照背包列出定义 前i个加油站,花费时间j...... 但是这里是求最小花费,所以我们…

Analogue Pocket 软硬件实验预告

如题,还在测试中,预计会在今年内发布。

.NET云原生应用实践(六):多租户初步

本章目标多租户简介 实现public租户下的用户数据隔离出于开发进度考虑,本章暂不会完全实现多租户的整套体系,而是会实现其中的一小部分:基于默认public租户的数据隔离,并在本章节中会讨论多租户的实现框架结构。在后续的系列文章章节中,我们会完成多租户的实现。多租户(M…

【MX-S7】梦熊 NOIP 2024 模拟赛 3 SMOI Round 2

hdk俩签到俩不可做是吧。Rank【MX-S7-T1】「SMOI-R2」Happy Card 签到题一号,以为撑死评个黄但没想到那么多人不会打扑克。 考虑炸弹也是三带一,出三带一肯定更优秀。 考虑将所有牌变为若干个三张和剩余的,那么三张先带单张,再将对子拆开带。那么现在就有以下几种情况:单张…

我勒湘军杯

今天以体验队参加了湘军杯,感觉和ctf差别挺大 使用sql注入、xss等方式对靶场漏洞进行挖掘,漏洞挖掘感觉需要把知识系统的利用起来, 虽然也是ctf的知识,但是感觉ctf的目标很明确,获取flag就结束,而且可以在网上搜索到类似的步骤解题

Springboot如何利用模板,快速生成word文档?

前言 大家好,我是小徐啊。我们在使用SpringBoot开发的时候,有时候会遇到需要生成word文档的情况。一般情况下,就是将一些数据填充到word文档里面。其实Java是有开源的第三方jar包的。今天,小徐就来介绍下如何在SpringBoot里面生成word文档。 如何设置 首先,我们需要在pom.…

HCIA-03 常用协议 ARP TCP UDP ICMP

主要介绍了常用协议和IP协议的基础知识, 包括TCP/UDP协议的工作原理、ARP地址解析协议的作用、ICMP协议用于网络控制和查询的信息传递等。 重点讲述了TCP协议的三次握手建立连接、数据传输与四次挥手断开连接的过程 以及IP协议在网络层实现跨广播域通信的基本原理。 此外,还提…

DDD之理解复杂度、尊重复杂度、掌控复杂度

本文书接上回《懂了这个道理,人月神话不再是神话!》,关注公众号(老肖想当外语大佬)获取信息:最新文章更新;DDD框架源码(.NET、Java双平台);加群畅聊,建模分析、技术交流;视频和直播在B站。关注公众号一定要星标,以及时获得最新推送。 背景 关于“复杂度”我在系列…

树的遍历顺序及其应用

树的遍历顺序及其应用 一、DFS 序 DFS 序就是以 DFS 的方式,记录每一个节点第一次被访问的顺序,这种顺序形成一个形成一个长度为 \(n\) 的序列。主要被用来维护子树信息。有以下特点:对于任意一个点来说,其子树里所有点的 DFS 序是连续的,具体来讲, \(x\) 的子树的所有结…

视野修炼-技术周刊第111期 | 读文件 API 性能对比

① Node.js 与 Bun 读取文件速度对比 ② 2024 HTML现状调研 ③ Viselect - 直观的 DOM 选择 ④ fraction.js - 精确的十进制运算库 ⑤ npmpackage.info - 在线查看 npm 包相关概览信息 ⑥ dive - 展示 docker 镜像里层的内容 ⑦ lcl.host - 一键本地生SSL证书 ⑧ 12 个现代CSS技…