三道较难的前端面试题

1,979 阅读2分钟

前言

最近参加面试,遇到一面试官,问了我三道题,我一道题都不会,然后就被刷了,感觉自己好low,我想把这三道题分享出来,请求广大掘金前端er帮我一下。

1、现在有一个列表,在强网环境下,不显示loading状态直接显示列表数据,但是在弱网环境下,则需要先显示loading状态,等待数据加载完成后再显示数据。如何实现?

想法: 主要就是如何区分强网环境和弱网环境。
第一问我感觉稍微比较合理的解决方案: 默认不显示loading ,同时发出请求后加个定时器1秒后开始执行显示loading,弱网下请求得到结果回调取消loading,强网下1秒内得到结果清掉定时器也不会出现loading

2、用户在一个页面发送了很多请求,突然用户点击了浏览器上的另外一个tab,跳出了这个页面,请问如何阻止前一个页面发送的那些请求?

想法: 如何监听当前页面是否处于inactive状态? 如何阻止ajax已发出去的请求(xhr.abort)?

3、有一个很深的树级结构数据渲染出来的DOM节点,每个节点都有自己的id,点击其中某一个节点,如何找到最顶级的节点?

数据结构类似于

{
      name: '顶级节点',
      id: 'id1',
      children:[
        {
          name: '子级节点1',
          id: 'id2',
          parentId: 'id1'
        },
        {
          name: '子级节点2',
          id: 'id3',
          parentId: 'id1'
        },
        {
          name: '子级节点3',
          id: 'id4',
          parentId: 'id1',
          children: [
            {
              name: '孙子节点',
              id: 'id5'
              parentId: 'id4',
              children:[
                ...
              ]
            }
          ]
        }
      ]
    }

想法:我知道很多人会说递归,我说了,但是他问有没有更好的方式,我无能为力了。 我在这里虚心请教了,因为网上的确没搜索到答案。