博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 定时器笔记
阅读量:6278 次
发布时间:2019-06-22

本文共 3019 字,大约阅读时间需要 10 分钟。

本文是学习js定时器、单线程、同步异步任务的笔记,只适合初学者。

一、定时器(timer)

JavaScript提供定时执行代码的功能,该功能主要由setTimeout()和setInterval()这两个函数来实现

二、setTimeout()

1、使用规则

setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。

第一个参数是函数名或者语句,第二个参数延迟的时间参数,单位为ms

var timerId = setTimeout(function|code, delay)setTimeout('console.log(2)',1000);

它返回定时器的编号,以后可以用来取消这个定时器。

clipboard.png

2、使用注意

推迟执行的代码必须以字符串的形式,放入setTimeout。

因为引擎内部使用eval函数,将字符串转为代码。
如果推迟执行的是函数,则可以直接将函数名,放入setTimeout
一方面eval函数有安全顾虑,另一方面为了便于JavaScript引擎优化代码,setTimeout方法一般总是采用函数名的形式

clipboard.png

三、setInterval()

setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次。如果不取消的话,就会无限次的定时执行。

第一个参数是函数名或者语句,第二个参数是间隔执行的时间,单位为ms
例一:实现自增数据输出

var i=0var timer=setInterval(function(){console.log(i++)},1000)//不要在function传递i参数,不然得到的就是NaN

clipboard.png

例二:实现定时器的功能

var timer=setInterval(function(){console.log(new Date)},1000)

clipboard.png

四、解除定时器clearTimeout(),clearInterval()

setTimeout和setInterval函数,都返回一个表示计数器编号的整数值。

将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。

var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);clearTimeout(id1);clearInterval(id2);

五:举个例子

其实这篇文章写定时器的经典案例写的很棒

var i=0;for(var i=0; i<10; i++){  setTimeout(function(){      console.log(i)  }, 1000)}

执行结果:

clipboard.png

解析:先执行主线程的for循环,for循环执行了10次,把匿名函数添加了到任务序列10次。等for循环执行完毕,i变成10之后,把任务序列的函数添加到主线程,输出10次i=10.

var t = true;  setTimeout(function(){   t = false; }, 1000);  while(t){console.log('end') }

执行结果:不停的输出end,不会再1000ms之后停止的。

解析:因为while循环是在主线程执行,主线程的while的循环不停止,是不会再执行任务队列里面setimeout的函数的。

六、单线程模型

五、六、七章的内容全部来源于

单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。

注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。

七、同步任务和异步任务

五、六、七章的内容全部来源于

程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。

八、任务队列

JavaScript 运行时,除了一个正在运行的主线程,引擎还提供一个任务队列(task queue),里面是各种需要当前程序处理的异步任务。

首先,主线程会去执行所有的同步任务。等到同步任务全部执行完,就会去看任务队列里面的异步任务。如果满足条件,那么异步任务就重新进入主线程开始执行,这时它就变成同步任务了。等到执行完,下一个异步任务再进入主线程开始执行。一旦任务队列清空,程序就结束执行。

引用这篇文章的解析:

同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。
当指定的事情完成时,Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
上述过程会不断重复,也就是常说的Event Loop(事件循环)。

clipboard.png

九、异步与回调函数

来源:如果没有callback函数,会先执行f2,f3函数再执行f2函数。

但是如果f1,f2函数是有先后顺序的,必须f1执行完成,再执行f2的话(f1可能是获取ajax,f2是处理ajax数据),就需要回调函数。

给f1设置callback函数做参数,然后把这个参数当成函数执行,执行f1的过程中,设置了一个定时器,等数据到来之后,再去执行callback函数。然后把f2作为f1的参数来调用

function f1(callback){    setTimeout(function(){        //做某件事,可能很久        console.log('别急,开始执行f1')        for(var i=0;i< 100000;i++){        }        console.log('f1执行完了')        callback()    }, 0);}function f2(){    console.log('执行f2');}function f3(){    console.log('执行f3');}f1(f2) //当f1执行完之后再执行 f2f3()

10、函数节流

转载一篇,写的非常好,具体内容可看这篇文章。我不再赘述,我只记录一下节流的代码

var timer  function hiFrequency(){      if(timer){          clearTimeout(timer)      }        timer = setTimeout(function(){             console.log('do something')        }, 300)  }  hiFrequency()  hiFrequency()  hiFrequency()
你可能感兴趣的文章
Git使用教程
查看>>
使用shell脚本自动监控后台进程,并能自动重启
查看>>
Flex&Bison手册
查看>>
solrCloud+tomcat+zookeeper集群配置
查看>>
/etc/fstab,/etc/mtab,和 /proc/mounts
查看>>
Apache kafka 简介
查看>>
socket通信Demo
查看>>
技术人员的焦虑
查看>>
js 判断整数
查看>>
建设网站应该考虑哪些因素
查看>>
mongodb $exists
查看>>
js实现页面跳转的几种方式
查看>>
sbt笔记一 hello-sbt
查看>>
常用链接
查看>>
pitfall override private method
查看>>
!important 和 * ----hack
查看>>
聊天界面图文混排
查看>>
控件的拖动
查看>>
svn eclipse unable to load default svn client的解决办法
查看>>
Android.mk 文件语法详解
查看>>