js 定时器笔记

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

一、定时器(timer)

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

二、setTimeout()

1、使用规则

setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。 第一个参数是函数名或者语句,第二个参数延迟的时间参数,单位为ms

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

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

2、使用注意

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

三、setInterval()

setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次。如果不取消的话,就会无限次的定时执行。 第一个参数是函数名或者语句,第二个参数是间隔执行的时间,单位为ms 例一:实现自增数据输出

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

例二:实现定时器的功能

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

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

setTimeout和setInterval函数,都返回一个表示计数器编号的整数值。 将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。

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

clearTimeout(id1);
clearInterval(id2);

五:举个例子 其实这篇文章写定时器的经典案例写的很棒JavaScrip同步、异步、回调执行顺序之经典闭包setTimeout分析

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

执行结果:

解析:先执行主线程的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 标准参考教程(alpha) 单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。

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

七、同步任务和异步任务

五、六、七章的内容全部来源于 阮一峰JavaScript 标准参考教程(alpha) 程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。

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

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

八、任务队列

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

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

引用这一次,彻底弄懂 JavaScript 执行机制这篇文章的解析:

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

九、异步与回调函数

来源:如果没有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执行完之后再执行 f2
f3()

10、函数节流

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

 var timer
  function hiFrequency(){
      if(timer){
          clearTimeout(timer)
      }
        timer = setTimeout(function(){
             console.log('do something')
        }, 300)
  }

  hiFrequency()
  hiFrequency()
  hiFrequency()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ajax笔记

    本文主要是我学习ajax的笔记,不涉及到原理,只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpRequest...

    bamboo
  • js函数、作用域和闭包

    2.1 用function命令声明函数 function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数,函数体放在大括号里面

    bamboo
  • mock数据

    本文主要是记录如何mock数据操作,防止我这条金鱼过几天又忘了如何操作。不涉及原理(当然写原理目前的我也写不出来,哈哈哈),只是写了操作步骤。如果有误欢迎大佬指...

    bamboo
  • 深入理解JavaScript的Event-Loop机制

    JavaScript 是单线程的,只有JS引擎线程执行事件队列的事件。为了防止代码阻塞,JavaScript使用了异步执行机制。

    伯爵
  • 高频面试题:JavaScript事件循环机制解析

    最近面试了很多家公司,这道题几乎是必被问到的一道题。之前总觉得自己了解得差不多,但是当第一次被问到的时候,却不知道该从哪里开始说起,涉及到的知识点很多。于是花时...

    木子星兮
  • JavaScript事件循环机制解析

    最近面试了很多家公司,这道题几乎是必被问到的一道题。之前总觉得自己了解得差不多,但是当第一次被问到的时候,却不知道该从哪里开始说起,涉及到的知识点很多。于是花时...

    前端迷
  • JS异步编程

    同步(sync)是一件事一件事的执行,只有前一个任务执行完毕才能执行后一个任务。异步(async)相对于同步,程序无须按照代码顺序自上而下的执行。

    Cloud-Cloudys
  • JavaScript Event Loop

    JavaScript 有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。事件循环包含一个函数执行栈、一个宏任务队列、一个...

    多云转晴
  • Java是如何实现Future模式的?万字详解!

    https://github.com/yuanmabiji/jdk1.8-sourcecode-blogs

    用户1564362
  • Java是如何实现Future模式的?万字详解!

    https://github.com/yuanmabiji/jdk1.8-sourcecode-blogs

    源码笔记

扫码关注云+社区

领取腾讯云代金券