美文网首页
setTimeout用法 & 任务队列异步函数节流(异步回调)

setTimeout用法 & 任务队列异步函数节流(异步回调)

作者: Long_Dark | 来源:发表于2020-03-17 04:10 被阅读0次

1.下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);

最后输出 1 3 2
因为setTimeout内的函数会异步计算,在所有步骤都操作完之后,在去执行setTimeout

2.下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

浏览器会卡死,因为setTimeout执行了一个异步,需要先处理完while(flag){},而这个while没有终止符,会无限循环下去,所以也加载不了setTimeout,无法终止while

3.实现一个节流函数

//实现一个节流函数
var time     //变量要放外面,不然每次执行函数,都会重新设置time那么clearTimeout就没有意义了
function 节流(){
  if (time){
    clearTimeout(time);     //当存在time编号的计时器时,取消计时器(第一次时time为false)
  }
  time = setTimeout(function(){    //设置计时器,被取消以后再重新设置一次
    console.log('请求已收到')
  },3000)     //延迟3000ms
}
节流()
// 节流() 
// 节流()
// 节流()
// 节流()
// 请求已收到
//实现一个节流函数2
function throt(fn,val){
  var timeout 
  return function(){
    clearTimeout(timeout)    //清除上一个编号的定时器
    timeout = setTimeout(fn,val)    //timeout得到的是这个定时器的编号,生成一个新的编号的定时器
  }  
}

function fnc(){
  console.log('请求已收到')
}
var aaa = throt(fnc,3000)
aaa()  //需要加()
aaa()

4.简单解释单线程、任务队列的概念

单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。

任务队列就是除了正在执行的主线程,还存了一些需要当前处理的异步任务。
当主线程的同步任务全部执行完之后,才会去看在任务队列内的异步任务。若满足条件,异步任务就会进入主线程开始执行,并变成了同步任务。重复上述步骤,到任务队列都清空了,程序就结束执行。

相关文章

网友评论

      本文标题:setTimeout用法 & 任务队列异步函数节流(异步回调)

      本文链接:https://www.haomeiwen.com/subject/oemaehtx.html