美文网首页
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