setTimeout 用法 & 任务队列异步函数节流

定时器

1. setTimeout()

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

var timerId = setTimeout(func|code, delay)

上面代码中，setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

上面代码的输出结果就是1，3，2，因为 setTimeout 指定第二行语句推迟1000毫秒再执行。

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

function f(){
  console.log(2);
}

setTimeout(f,1000);

// 或者

setTimeout(function (){console.log(2)},1000);

2. setInterval()

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

 var i = 1
  var timer = setInterval(function() {
    console.log(i++);
  }, 1000);

上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮。

3. clearTimeout()，clearInterval()

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

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

clearTimeout(id1);
clearInterval(id2);

4. 单线程模型

image

参考文章

5. 运行机制

setTimeout 和 setInterval 的运行机制是，将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout 指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

setTimeout 的作用是将代码推迟到指定时间执行，如果指定时间为0，即 setTimeout(f,0) ，那么不会立刻执行。

setTimeout(f,0) 将第二个参数设为0，作用是让 f 在现有的任务（脚本的同步任务和“任务队列”中已有的事件）一结束就立刻执行。也就是说，setTimeout(f,0) 的作用是，尽可能早地执行指定的任务。

问题 1 ：以下代码输出什么？

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

首先执行 for 循环，for 循环执行完毕（此时 i = 10）后 ，1000 毫秒执行 console.log(i) ，输出为 10 次 10。
解释：setTimeout是个异步定时函数，js是单线程，所以就算延时为0，它也是要等到for循环执行完了，才到它执行，每执行一次for语句就会就会产生一个异步执行，放在等待队列里，所以最后执行时就是输出10个10了。

问题 2 ：以下代码输出什么？

var t = true;  
setTimeout(function(){ 
  t = false; 
}, 1000);  

while(t){ }  
console.log('end')

不输出。浏览器会一直执行 while(t){} ，不会执行到 console.log('end')。

6. 异步与回调

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()

异步：通俗来说就是同一时刻做不同事而不是只等一件事做完再做另一件事。
回调：f1(f2) 这里就是回调，执行完了 f1 后再执行 f2

7. 函数节流

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

hiFrequency()
hiFrequency()
hiFrequency()

通俗来说，函数节流就是截下开始做了但还在等待队列中的事，而又重新做一件事。

改造：

function throttle(fn, delay) {
  var timer = null
  return function(){
    clearTimeout(timer)
    timer = setTimeout(function(){ 
      fn(arguments)
    }, delay)
  }
}

function fn(){
  console.log('hello ')
}

var fn2 = throttle(fn, 1000)
fn2()
fn2()
fn2()