在自己用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.多个定时器的代码执行之间的间隔可能比预期的小

  • 如下图:

4.链式setTimeout

  • 使用链式setTimeout来解决我画时钟的那个问题

setTimeout(function fn() {
console.log(111);
setTimeout(fn, 1000);
}, 1000)
  • 使用链式模式调用setTimeout(),函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用当前执行的函数,并为其设置另外一个定时器。使得在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。而且,它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行

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

原文地址:https://segmentfault.com/a/1190000016116657

setInterval与setTimeout的更多相关文章

  1. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  2. JavaScript SetInterval与setTimeout使用方法详解

    setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 ...

  3. JS里设定延时:js中SetInterval与setTimeout用法

     js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...

  4. 关于setInterval和setTImeout中的this指向问题

    前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...

  5. js-定时任务setInterval,setTimeout,clearInterval,clearTimeout

    setInterval()循环执行相应的方法 <script type="text/javascript"> setInterval("myInterval( ...

  6. Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用. Document自带的方法: 循环执行:var ...

  7. webapp 慎用setInterval、setTimeout

    其实这片文章刚开始我啥也没写的,但也有20多的访问量,所以觉得大家还是比较关注这个问题,所以找机会写下. 问题的引出: 为什么我说的时webapp中慎用setInterval.setTimeout, ...

  8. js学习--浏览器对象计时器setInterval()与setTimeout()的使用与区别

    一.setInterval()与setTimeout()的定义: 二.setInterval()与setTimeout()的使用:    1.setInterval()与clearInterval() ...

  9. js定时器setInterval()与setTimeout()

    js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...

  10. setInterval 和 setTimeout

    setInterval 和 settimeout的区别 setinterval 1.会造成某些间隔会被跳过2.多个定时器之间的执行代码事假间隔比预期的小 而且 当定时器代码添加到任务队列里面没有被执行 ...

随机推荐

  1. VS文档自动生成

    VS2008文档自动生成 (发现,Sandcastle主要是用于C#项目.里面的注释都是XML格式的.不太适合VC的.最终还是得用Doxygen) 一.Sandcastle简介: Sandcastle ...

  2. Java local 转UTC时间

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  3. ElasticSearch 全文检索— ElasticSearch概述

    ElasticSearch 产生背景 1.海量数据组合条件查询 2.毫秒级或者秒级返回数据 Lucene 定义 lucene是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一 ...

  4. QT学习小demo之LightMD(MarkDown编辑器)

    很早之前就有了写一个类似Windows记事本的想法,加上最近也刚好在学编译原理,所以就想把两者结合起来,于是就打算结合MarkDown,开发一款MarkDown编辑器. 不过由于我之前一直使用的是Ja ...

  5. js中的onclick事件传参需要注意的问题

    如果参数是数值类型可以直接传,如果是字符串类型需要在字符串前后加上双引号,双引号需要转义 如 onclick="test(0)";  直接传值 参数为数值 onclick=&quo ...

  6. 【Linux】Xshell-Linux常用命令

    (1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以. ...

  7. 关于PCA降维中遇到的python问题小结

    由于论文需要,开始逐渐的学习CNN关于文本抽取的问题,由于语言功底不好,所以在学习中难免会有很多函数不会用的情况..... ̄へ ̄ 主要是我自己的原因,但是我更多的把语言当成是一个工具,需要的时候查找就 ...

  8. 使用SpringSession管理分布式会话时遇到的反序列化问题

    关于SpringSession相关的介绍和使用指南,可移步如下网址: [SpringSession管理分布式系统的会话Session] https://www.cnblogs.com/captaina ...

  9. .NET中异常类(Exception)

    异常:程序在运行期间发生的错误.异常对象就是封装这些错误的对象. try{}catch{}是非常重要的,捕获try程序块中所有发生的异常,如果没有捕获异常的话,程序运行的线程将会挂掉,更严重的是这些错 ...

  10. 360、IE等浏览器对bootstrap的影响

    笔者开发的web程序部署上线后发现,bootstrap的菜单不显示,开发时候用chrome没有发现问题,在360浏览器上跑,发现360默认的是兼容模式,切换到极速模式就能够显示菜单了. 但是这样的用户 ...