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

Posted 2021-01-07 ianyanyzx

定时器

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）运行机制

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

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

 

5）异步

程序里面所有的任务，可以分成两类：同步任务（synchronous）和异步任务（asynchronous）。

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

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

 

6）函数节流

当一个方法频繁多次用到，以判断最后一个的操作为准。

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