美文网首页
前端面试题之JavaScript(七)

前端面试题之JavaScript(七)

作者: 庄海鑫 | 来源:发表于2017-09-18 14:33 被阅读0次

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


    从Chrome开发者工具看出,先执行第七行代码,再执行第九行,最后执行第四行,前两个属于同步任务,最后一个属于异步任务,只有当同步任务完成后,才会执行异步任务。总之,setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。


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

    • 没有输出 。 因为setTimeout会在当前代码执行队列结束后执行,本例中while循环结束后才会执行setTimeout中的函数,所以while循环的条件永远是true,会无限循环下去,而while中没有任何代码,所以打印flag没有任何输出

    3.实现一个节流函数

    • 函数节流就是不让一个函数执行的过于频繁而设置的。
        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()
    

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

    • 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
    • 任务队列分为两种
      一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
    • 消息队列和任务队列的区别
      消息队列和任务队列其实有很大的相似性,消息队列更着重的是消息,也就是告知,而任务队列着重与任务,也就是执行。所以说一般是外部发送消息通过消息队列所在的消息处理服务器,消息处理服务器再转发给相应任务所在的任务服务器并在任务队列中排队等待执行。
    • 异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)
      • (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
      • (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
      • (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
      • (4)主线程不断重复上面的第三步。
    异步

    原因: f2(),f3()是同步任务,f1()是异步任务,所以后执行

    function f1(callback){
        setTimeout(function(){
            //做某件事,可能很久
            console.log('别急,开始执行f1')
            for(var i=0;i< 100000;i++){
    
            }
            console.log('f1执行完了')
    
            callback()
        }, 10000);
    
    }
    function f2(){
        console.log('执行f2');
    }
    function f3(){
        console.log('执行f3');
    }
    f1(f2) //当f1执行完之后再执行 f2
    f3()
    
    回调

    绑定onclick, Ajax,定时器


    阮一峰单线程和任务队列

    相关文章

      网友评论

          本文标题:前端面试题之JavaScript(七)

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