setInterval与setTimeout

在本身用canvas画一个时钟时,画秒钟用的是应用图片将反复的线条遮住,然则会出现有两个秒钟线条同时存在,才想起setInterval有那末个坑,查了点材料,记录下,如有不对的或许未写到的点,还请人人指出,感谢^_^

  • 在此之前先科普下这个进修点

历程与线程的区分

借用阮一峰大大借用的比方,完成一个小实例:

  • 有一个大型工场
  • 工场里有多少车间,每次只能有一个车间在功课
  • 每一个车间里有多少房间,有多少工人在流水线功课

那末:

  • 一个工场对应的就是计算机的一个CPU,日常平凡讲的多核就代表多个工场
  • 每一个工场里的车间,就是历程,意味着统一时刻一个CPU只运转一个历程,其他历程在怠工
  • 这个运转的车间(历程)里的工人,就是线程,能够有多个工人(线程)协同完成一个使命
  • 车间(历程)里的房间,代表内存。

再深切点:

  • 车间(历程)里工人能够随意在多个房间(内存)之间走动,意味着一个历程里,多个线程能够同享内存
  • 部份房间(内存)有限,只允许一个工人(线程)运用,此时其他工人(线程)要守候
  • 房间里有工人进去后上锁,其他工人需要等房间(内存)里的工人(线程)开锁出来后,才才进去,这就是互斥锁(Mutual exclusion,缩写 Mutex)
  • 有些房间只能包容部份的人,意味着部份内存只能给有限的线程

再再深切:

  • 假如同时有多个车间功课,就是多历程
  • 假如一个车间里有多个工人协同功课,就是多线程
  • 固然差别车间之间的工人也能够有相互协作,就需要谐和机制

觉得一会儿就记住了这两者的概念及区分

1.setTimeout

  • setTimeout()用来指定某个函数或字符串在指定的毫秒数以后实行;它会返回一个整数,示意定时器的编号,这个值能够通报给clearTimeout()用来消灭定时器
/* 一秒钟后在掌握台上打印出111 */
<script>
    setTimeout(function() {
        console.log(111);
    }, 1000)
</script>
  • 也能够写成字符串参数的情势,但这类情势会形成javascript引擎两次剖析,下降机能(1.引擎内部运用eval()函数,将字符串转为代码;2.代码实行的剖析)
<script>
    setTimeout('console.log(111)', 1000)
</script>

2.在IE浏览器中运用定时器存在部份小题目:

  • IE9浏览器只允许setTimeout有两个参数,不支持更多的参数,会在掌握台输出NaN

    • 能够运用IIFE来举行参数的通报
setTimeout((function(x, y) {
    console.log(x+y);
})(1,2), 1000)
  • IE8浏览器不允许向定时器中通报事宜对象event

    • 能够将事宜对象中的某些属性保存在变量中通报进去
div.onclick = function(e) {
    e = e || event;
    let type = e.type;
    setTimeout(function(e) {
        console.log(e.type);  /* 报错 */
        console.log(type);  /* click */
    }, 1000)
}

3.setInterval

  • setInterval指定某个使命每隔一段时刻就实行一次,也就是无限次的定时实行

HTML5规范划定,setTimeout的最短时刻距离是4ms;setInterval的最短距离时刻是10ms,所以,小于了最短的时刻距离会被调整到最短时刻距离

  • 运用setInterval()时,定时器代码能够在代码再次被添加到行列之前还没有完成实行,致使定时器代码一连实行了屡次,但之间没有任何停留。javascript引擎的处理体式格局就是:运用setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到实行行列中,确保定时器代码加入到行列中的最小时刻距离为指定距离

但这也会致使两个题目:1.某些距离被跳过2.多个定时器的代码实行之间的距离能够比预期的小

  • 如下图:

《setInterval与setTimeout》

4.链式setTimeout

  • 运用链式setTimeout来处理我画时钟的那个题目
setTimeout(function fn() {
    console.log(111);
    setTimeout(fn, 1000);
}, 1000)
  • 运用链式形式挪用setTimeout(),函数实行的时刻都邑建立一个新的定时器。第二个setTimeout()挪用当前实行的函数,并为其设置别的一个定时器。使得在前一个定时器代码实行完之前,不会向行列插进去新的定时器代码,确保不会有任何缺失的距离。而且,它能够保证鄙人一次定时器代码实行之前,最少要守候指定的距离,避免了一连的运转

正在努力进修中,若对你的进修有协助,留下你的印记呗(点个赞咯^_^)

    原文作者:ZJW0215
    原文地址: https://segmentfault.com/a/1190000016116657
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞