前端面试题之JavaScript(七)


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)主线程不断重复上面的第三步。

5.列出DOM 元素选取的 API

  • getElementById()
  • getElementsByClassName():返回一个HTMLCollection动态集合(也可以说返回一个NodeList类数组对象)
  • getElementsByTagName():返回一个HTMLCollection动态集合(也可以说返回一个NodeList类数组对象
  • getElementsByName():返回一个动态NodeList类数组对象,最常用的场景是取得单选按钮
  • querySelector():接收一个参数:一个包含一个或多个CSS 选择器的字符串(多个选择器以逗号分隔),返回匹配指定CSS选择器的第一个元素节点(无法选中CSS伪元素),没有发现匹配的节点则返回null。
  • querySelectorAll():接收一个参数:一个包含一个或多个CSS 选择器的字符串(多个选择器以逗号分隔),返回静态NodeList对象集合,该集合中包含匹配指定CSS选择器的所有节点,元素节点的变化无法实时反映在结果中;如果参数中包含CSS伪元素则返回一个空的对象集合。
  • elementFromPoint():接收两个参数:分别是相对于当前窗口左上角的横纵坐标,单位为CSS像素,返回位于页面指定位置的元素,如果该元素不可返回(如滚动条)则返回它的父元素,如果坐标值无意义(如负值)则返回null。

6.如何操作DOM元素?

  • createElement()
  • createTextNode()
  • createDocumentFragment():虚拟片段
  • appendChild()
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
  • insertBefore():
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
  • replaceChild():replaceChild()接受两个参数:要插入的元素和要替换的元素
newDiv.replaceChild(newElement, oldElement);
  • removeChild()
parentNode.removeChild(childNode);
  • cloneNode()
    用于克隆元素,方法有一个布尔值参数,传入true的时候会深复制,也就是会复制元素及其子元素(IE还会复制其事件),false的时候只复制元素本身
node.cloneNode(true);

7. 异步与回调

function f1(){
    setTimeout(function(){
        //做某件事,可能很久
        console.log('别急,开始执行f1')
        for(var i=0;i< 100000;i++){

        }
        console.log('f1执行完了');
    }, 0);

}
function f2(){
    console.log('执行f2');
}
function f3(){
    console.log('执行f3');
}
f1();
f2();
f3();
异步

原因: 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,定时器


阮一峰单线程和任务队列

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 一、多线程 说明下线程的状态 java中的线程一共有 5 种状态。 NEW:这种情况指的是,通过 New 关键字创...
    Java旅行者阅读 4,665评论 0 44
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,315评论 24 450
  • 老李约我下午去库布里克书店,一来是因为俩人好久没见到了,二来是因为这个书店环境好,咖啡书店。 中午开始收拾房间,洗...
    王二公子阅读 300评论 1 5
  • 我 像一只麻雀 在夕阳下 飞落秋天的肩膀 用力呼吸着 季节留下的最后一缕花香 看落日暖阳 照亮家的方向 我 轻轻地...
    桂花上酸菜阅读 207评论 7 18
  • 最近在看《习惯的力量》和《白说》这两本书。阅读这个事情每天都有坚持,只是坚持的时间长短罢了。看《习惯的力量》的时...
    曾曾的麻麻阅读 143评论 0 0