jscript定时器,一直用的东西,你真的明白吗?
JavaScript定时器
JavaScript是一种解释型语言(边编译边执行),Js解析顺序是从上到下,然后将编译后的任务丢到一个事件队列中,然后事件内的函数会从上到下开始执行

setInterval
setInterval(fn,t); fn是间隔t毫秒后执行的代码块
每隔t就执行fn直到你清除定时器
当js引擎读取到一个setInterval语句的时候就会往浏览器定时触发器中丢一个任务,然后定时 触发器每隔t毫秒就往当前任务队列中丢一个任务,任务内容为fn中的代码块(有图有真相)

var startTime=new Date();
setInterval(function(){
console.log((new Date()-startTime)+"毫秒");
},1000);

可以看到每次都差不多1000毫秒。
setTimeout
setTimeout(fn,t);延迟t毫秒之后执行fn,区别就是这个只执行一次

var startTime=new Date();
setTimeout(function(){
console.log((new Date()-startTime)+"毫秒");
},1000);

看到这里细心的人会发现异步这个词
定时器是异步的
给大家举个例子
var fn=function(){
console.log(123);
}
setTimeout(fn,1000);
console.log(567);

没想到吧?567是先执行的。为什么fn里面的代码不是等1000毫秒执行完之后输出123,再输出567呢
就是因为定时器是异步的,js解析到定时器的时候,会把定时器扔到定时触发器,当延迟1000毫秒之
后,再扔到当前任务队列里面执行。在这个延迟的过程中,任务队列里面的代码依然会执行,不会说
等你定时器执行了之后,我在执行!如果是等你执行完我在执行,那效率太 slow baby了
而且使用的时候不要太过于依赖定时器设置好的定时器时间,延迟的时间严格意义上来说总是大于t的,至于大多少,就要看当时js的执行情况了。
seTimeout注册的函数会把任务丢给定时触发器线程,而定时触发器一旦到了延迟的时间就会将fn加入主进程执行队列。但是如果当前任务队列还有没执行完的代码,而又需要等待当前任务执行完毕才能执行
到fn,所以实际的延迟会比设置的时间要长。如果你在fn之前设置一个大大大循环,那你等吧。。啊哈哈哈哈


清除定时器,如果不清除定时器的话,会不断往当前任务列表里面添加任务执行,会把任务列表给整乱
代码执行顺序了 时间了 误差就大了 你的页面也就GG了所以用完要清除的。
timer =setInterval(fn,t);
clearInterval(timer);
同理
看完了 应该都能明白吧 看完给个赞呗 !!!
jscript定时器,一直用的东西,你真的明白吗?的更多相关文章
- python变量、对象和引用你真的明白了吗
python变量.对象和引用你真的明白了吗 变量.对象和引用 Python不像C++,Java等语言一样,他们可以不用事先声明变量类型而直接对变量进行赋值.对Python语言来讲,对象的类型和内存都是 ...
- 嵌入式Linux要学哪些东西?你真的造吗?
嵌入式Linux要学哪些?一些人总在寻思,怕走了弯路,又怕学的东西离企业需求远.那么今天就请华清远见高级讲师曹大神告诉你,9点浅析嵌入式学习步骤.下面是他本人亲笔. 1.要学习Linux,首先要会用, ...
- C语言/原子/编译,你真的明白了吗?
说到原子,类似于以下的代码可能人人都可以看出猫腻. #include <stdio.h> #include <pthread.h> ; void* mythread(void* ...
- mybatis 中的 update 返回值你真的明白吗
记录源地址:https://www.jianshu.com/p/80270b93082a
- 昨天刚看了Handler和HandlerThread这个东西,不明白为什么要用这么复杂的东西,而且Handler直接post的话好像还不是子线程运行。那我再开发的时候直接用Thread行不行?两个有什么区别?
Handler就是android中一个机制,主要是考虑到线程安全的! Handler是可以实现线程间通信的,LZ知道Android的UI线程不安全的吧,也就是说不可以在UI线程以外的其他线程对UI进行 ...
- cookie与session的区别,你真的明白吗?
当我们访问网页时,http是属于无状态的,为什么呢?接下来由我慢慢讲解,在cookie的到来之前,你第一次访问页面的时候和最后一次访问页面服务器是不知道的,不知道那一次访问的页面是你.当用户登录的时候 ...
- nginx 中location和root,你确定真的明白他们关系?
最近公司开发新项目,web server使用nginx,趁周末小小的研究了一下,一不小心踩了个坑吧,一直404 not found!!!!!当时卡在location和root中,但是网上却比较少聊这方 ...
- List的扩容机制,你真的明白吗?
一:背景 1. 讲故事 在前一篇大内存排查中,我们看到了Dictionary正在做扩容操作,当时这个字典的count=251w,你把字典玩的66飞起,其实都是底层为你负重前行,比如其中的扩容机制,当你 ...
- 这次我好像才真的明白了CSS Rem字体计算的原理
背景 如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单. 根字体大小计算核心原理 设备的根字体大小 * ...
随机推荐
- Atlas安装配置
准备环境 192.168.1.1(Altas) 192.168.1.2(MySQL主) 192.168.1.3(MySQL从) 官方链接:https://github.com/Qihoo360/Atl ...
- Mycat 分片规则详解--ASCII 取模范围分片
实现方式:该算法与取模范围算法类似,该算法支持数值.符号.字母取模.首先截取长度为 prefixLength 的子串,在对子串中每一个字符的 ASCII 码求和,然后对求和值进行取模运算(sum%pa ...
- 【Python】 用户图形界面GUI wxpython III 更多组件
wxpython - 更多组件 我写到的这些组件可能一来不是很详细,二来不是最全的,想要更好地用这些组件,应该还是去看看教程和别的示例.比较简单的,推荐http://download.csdn.net ...
- EF Core利用Transaction对数据进行回滚保护
What? 首先,说一下什么是EF Core中的Transaction Transaction允许以原子方式处理多个数据库操作,如果事务已提交,则所有操作都应用于数据库,如果事务回滚,则没有任何操作应 ...
- Vue项目环境搭建(node+webpack)
安装node.js 下载地址:https://nodejs.org/en/download/ node -v //查看node.js版本 项目环境配置: 安装vue-cli:npm install - ...
- 不安装oracle客户端连接oracle数据库
PLSQL Developer 或Toad 不安装Oracle 客户端连接数据库 为了简化Oracle在个人电脑的使用,避免占用不必要的资源,可以不安装Oracle客户端.方法是:使用Oracle I ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- C#图解 (类和继承)
所有的类都派生自object类 除了特殊的类object ,所有的类都是派生类,即使它们没有基类的规格说明.类object是唯一的非派生类,因为它是继承层次结构的基础. 一个类声明的基类规格说明只能有 ...
- Could not create pool connection. The DBMS driver exception was: null, message from server: "Host '192.168.XX.XX' is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'
早上打开浏览器准备登陆某个系统,发现Error 404--Not Found,有点奇怪,这个服务器应该没人用了才对,然后到weblogic后台去看日志,报如下错误: "Could not c ...
- 第四次团队作业:社团申请App
概要: 基于上次软件设计本着界面简洁.易于使用的初衷,进行功能的实现,代码位置:https://github.com/LinZezhong/testDemo 第一部分:软件的使用 注册: 登录: 主界 ...