JS 定时器&异步任务与函数节流

Posted ianyanyzx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 定时器&异步任务与函数节流相关的知识,希望对你有一定的参考价值。

定时器

javascript 提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()setInterval()这两个函数来完成。它们向任务队列添加定时任务。

 

1)setTimeout

 setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

 

var timer = setTimeout(func|code, delay);  //第一个参数可以是函数也可以是代码块,第二个是延迟的时间,单位是毫秒
console.log(1);
setTimeout(‘console.log(2)‘,1000);
console.log(3);
// 1
// 3
// 2

如果第一个参数填入的是代码,需要加上引号必须是字符串的形式,里面有eval的方法将字符串解析成代码执行,一般最好不要用这种方式。

 

2)setInterval

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

var i = 0;
var timer = setInterval(function(){
    console.log(i++)
},1000)
0
1
2
3
4
//每隔一秒执行一次代码。

 

这两个定时器的方法执行后会有个返回值,是它们的编号,我们可以对这些编号进行操作。

setInterval(function(){
    console.log(‘zxw‘);
},1000)
30  //可以对编号进行操作,如用clearInterval可以清除代码继续执行

var timer =clearInterval(function(){
    console.log(‘zxw‘);
},1000)

clearInterval(timer)

 

 

3)单线程模型

指的是任务在一个线程上执行,JavaScript同时只能执行一个任务,其他任务都必须在后面排队等待。
注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。

 

4)运行机制

setTimeoutsetInterval的运行机制,是将指定的代码移出本轮事件循环,等到下一轮事件循环,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就继续等待。

这意味着,setTimeoutsetInterval指定的回调函数,必须等到本轮事件循环的所有同步任务都执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证,setTimeoutsetInterval指定的任务,一定会按照预定时间执行。

 

5)异步

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

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

异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。

 

6)函数节流

当一个方法频繁多次用到,以判断最后一个的操作为准。
var timer
function hiFrequency(){
    if(timer){
        clearTimeout(timer)
    }
      timer = setTimeout(function(){
           console.log(‘do something‘)
      }, 300)
}

 

以上是关于JS 定时器&异步任务与函数节流的主要内容,如果未能解决你的问题,请参考以下文章

js函数节流

js定时器每秒执行一次,为啥时间会不准?

js-定时器

2020.3.9解决定时器的防抖和节流

JavaScript定时器与执行机制解析

js节流和防抖