Javascript面试中经常被问到的三个问题！

本文不是讨论***的 JavaScript 库、常见的开发实践或任何新的 ES6 函数。相反，在讨论 JavaScript 时，面试中通常会提到三件事。我自己也被问到这些问题，我的朋友们告诉我他们也被问到这些问题。

创新互联建站主营开原网站建设的网络公司,主营网站建设方案,APP应用开发,开原h5小程序制作搭建,开原网站营销推广欢迎开原等地区企业咨询

然，这些并不是你在面试之前应该学习的唯一三件事 - 你可以通过多种方式更好地为即将到来的面试做准备 - 但面试官可能会问到下面是三个问题，来判断你对 JavaScript 语言的理解和 DOM 的掌握程度。

让我们开始吧！注意，我们将在下面的示例中使用原生的 JavaScript，因为面试官通常希望了解你在没有 jQuery 等库的帮助下对JavaScript 和 DOM 的理解程度。

问题 1: 事件委托代理

在构建应用程序时，有时需要将事件绑定到页面上的按钮、文本或图像，以便在用户与元素交互时执行某些操作。

如果我们以一个简单的待办事项列表为例，面试官可能会告诉你，当用户点击列表中的一个列表项时执行某些操作。他们希望你用 JavaScript 实现这个功能，假设有如下 HTML 代码:

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   Walk the dog
    3.  
  
  
  
  
  3.   Pay bills
    4.  
  
  
  
  
  4.   Make dinner
    5.  
  
  
  
  
  5.   Code for one hour
    6.  
  
  
  
  
  6.

你可能想要做如下操作来将事件绑定到元素:

 
 
 
 
    
  
  
  
  
  1. document.addEventListener('DOMContentLoaded', function() { 
    2. 
  
  
  
  
  2.   let app = document.getElementById('todo-app'); 
    3. 
  
  
  
  
  3.   let itimes = app.getElementsByClassName('item'); 
    4. 
  
  
  
  
  4.   for (let item of items) { 
    5. 
  
  
  
  
  5.     item.addEventListener('click', function(){ 
    6. 
  
  
  
  
  6.       alert('you clicked on item: ' + item.innerHTML); 
    7. 
  
  
  
  
  7.     }) 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9. })
    10.

虽然这在技术上是可行的，但问题是要将事件分别绑定到每个项。这对于目前 4 个元素来说，没什么大问题，但是如果在待办事项列表中添加了 10,000 项(他们可能有很多事情要做)怎么办?然后，函数将创建 10,000 个独立的事件侦听器，并将每个事件监听器绑定到 DOM ，这样代码执行的效率非常低下。

在面试中，***先问面试官用户可以输入的***元素数量是多少。例如，如果它不超过 10，那么上面的代码就可以很好地工作。但是如果用户可以输入的条目数量没有限制，那么你应该使用一个更高效的解决方案。

如果你的应用程序最终可能有数百个事件侦听器，那么更有效的解决方案是将一个事件侦听器实际绑定到整个容器，然后在单击它时能够访问每个列表项， 这称为 事件委托，它比附加单独的事件处理程序更有效。

下面是事件委托的代码:

 
 
 
 
    
  
  
  
  
  1. document.addEventListener('DOMContentLoaded', function() { 
    2. 
  
  
  
  
  2.   let app = document.getElementById('todo-app'); 
    3. 
  
  
  
  
  3.   app.addEventListener('click', function(e) { 
    4. 
  
  
  
  
  4.     if (e.target && e.target.nodeName === 'LI') { 
    5. 
  
  
  
  
  5.       let item = e.target; 
    6. 
  
  
  
  
  6.       alert('you clicked on item: ' + item.innerHTML) 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.   }) 
    9. 
  
  
  
  
  9. })
    10.

问题 2： 在循环中使用闭包

闭包常常出现在面试中，以便面试官衡量你对 JS 的熟悉程度，以及你是否知道何时使用闭包。

闭包基本上是内部函数可以访问其范围之外的变量。 闭包可用于实现隐私和创建函数工厂， 闭包常见的面试题如下：

编写一个函数，该函数将遍历整数列表，并在延迟3秒后打印每个元素的索引。

经常不正确的写法是这样的：

 
 
 
 
    
  
  
  
  
  1. const arr = [10, 12, 15, 21]; 
    2. 
  
  
  
  
  2. for (var i = 0; i < arr.length; i++) { 
    3. 
  
  
  
  
  3.   setTimeout(function() { 
    4. 
  
  
  
  
  4.     console.log('The index of this number is: ' + i); 
    5. 
  
  
  
  
  5.   }, 3000); 
    6. 
  
  
  
  
  6. }
    7.

如果运行上面代码，3 秒延迟后你会看到，实际上每次打印输出是 4，而不是期望的 0，1，2，3 。

为了正确理解为什么会发生这种情况，了解为什么会在 JavaScript 中发生这种情况将非常有用，这正是面试官试图测试的内容。

原因是因为 setTimeout 函数创建了一个可以访问其外部作用域的函数（闭包），该作用域是包含索引 i 的循环。 经过 3 秒后，执行该函数并打印出 i 的值，该值在循环结束时为 4，因为它循环经过0,1,2,3,4并且循环最终停止在 4。

实际上有多处方法来正确的解这道题：

 
 
 
 
    
  
  
  
  
  1. const arr = [10, 12, 15, 21]; 
    2. 
  
  
  
  
  2. for (var i = 0; i < arr.length; i++) { 
    3. 
  
  
  
  
  3.   setTimeout(function(i_local){ 
    4. 
  
  
  
  
  4.     return function () { 
    5. 
  
  
  
  
  5.       console.log('The index of this number is: ' + i_local); 
    6. 
  
  
  
  
  6.     } 
    7. 
  
  
  
  
  7.   }(i), 3000) 
    8. 
  
  
  
  
  8. } 
    9. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. const arr = [10, 12, 15, 21]; 
    2. 
  
  
  
  
  2. for (let i = 0; i < arr.length; i++) { 
    3. 
  
  
  
  
  3.   setTimeout(function() { 
    4. 
  
  
  
  
  4.     console.log('The index of this number is: ' + i); 
    5. 
  
  
  
  
  5.   }, 3000); 
    6. 
  
  
  
  
  6. }
    7.

问题 3：事件的节流（throttle）与防抖（debounce）

有些浏览器事件可以在短时间内快速触发多次，比如调整窗口大小或向下滚动页面。例如，监听页面窗口滚动事件，并且用户持续快速地向下滚动页面，那么滚动事件可能在 3 秒内触发数千次，这可能会导致一些严重的性能问题。

如果在面试中讨论构建应用程序，出现滚动、窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流（Throttling）来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，***用 setTimeout 来控制事件的触发频率。

Throttle： ***个人说了算

throttle 的主要思想在于：在某段时间内，不管你触发了多少次回调，都只认***次，并在计时结束时给予响应。

这个故事里，‘裁判’ 就是我们的节流阀， 他控制参赛者吃东西的时机， “参赛者吃东西”就是我们频繁操作事件而不断涌入的回调任务，它受 “裁判” 的控制,而计时器，就是上文提到的以自由变量形式存在的时间信息，它是 “裁判” 决定是否停止比赛的依据，***，等待比赛结果就对应到回调函数的执行。

总结下来，所谓的“节流”，是通过在一段时间内无视后来产生的回调请求来实现的。只要 裁判宣布比赛开始，裁判就会开启计时器，在这段时间内，参赛者就尽管不断的吃，谁也无法知道最终结果。

对应到实际的交互上是一样一样的：每当用户触发了一次 scroll 事件，我们就为这个触发操作开启计时器。一段时间内，后续所有的 scroll 事件都会被当作“参赛者吃东西——它们无法触发新的 scroll 回调。直到“一段时间”到了，***次触发的 scroll 事件对应的回调才会执行，而“一段时间内”触发的后续的 scroll 回调都会被节流阀无视掉。

现在一起实现一个 throttle：

 
 
 
 
    
  
  
  
  
  1. // fn是我们需要包装的事件回调, interval是时间间隔的阈值 
    2. 
  
  
  
  
  2. function throttle(fn, interval) { 
    3. 
  
  
  
  
  3.   // last为上一次触发回调的时间 
    4. 
  
  
  
  
  4.   let last = 0 
    5. 
  
  
  
  
  5.   // 将throttle处理结果当作函数返回 
    6. 
  
  
  
  
  6.   return function () { 
    7. 
  
  
  
  
  7.       // 保留调用时的this上下文 
    8. 
  
  
  
  
  8.       let context = this 
    9. 
  
  
  
  
  9.       // 保留调用时传入的参数 
    10. 
  
  
  
  
  10.       let args = arguments 
    11. 
  
  
  
  
  11.       // 记录本次触发回调的时间 
    12. 
  
  
  
  
  12.       let now = +new Date()      
    13. 
  
  
  
  
  13.       // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值 
    14. 
  
  
  
  
  14.       if (now - last >= interval) { 
    15. 
  
  
  
  
  15.       // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调 
    16. 
  
  
  
  
  16.           last = now; 
    17. 
  
  
  
  
  17.           fn.apply(context, args); 
    18. 
  
  
  
  
  18.       } 
    19. 
  
  
  
  
  19.     } 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21. // 用throttle来包装scroll的回调 
    22. 
  
  
  
  
  22. const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000) 
    23. 
  
  
  
  
  23. document.addEventListener('scroll', better_scroll)
    24.

Debounce： ***一个参赛者说了算

防抖的主要思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认***一次。

继续大胃王比赛故事，这次换了一种比赛方式，时间不限，参赛者吃到不能吃为止，当每个参赛都吃不下的时候，后面10分钟如果没有人在吃，比赛结束，如果有人在10分钟内还能吃，则比赛继续，直到下一次10分钟内无人在吃时为止。

对比 throttle 来理解 debounce： 在 throttle 的逻辑里， ‘裁判’ 说了算，当比赛时间到时，就执行回调函数。而 debounce 认为***一个参赛者说了算，只要还能吃的，就重新设定新的定时器。

现在一起实现一个 debounce：

 
 
 
 
    
  
  
  
  
  1. // fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间 
    2. 
  
  
  
  
  2. function debounce(fn, delay) { 
    3. 
  
  
  
  
  3.   // 定时器 
    4. 
  
  
  
  
  4.   let timer = null 
    5. 
  
  
  
  
  5.   // 将debounce处理结果当作函数返回 
    6. 
  
  
  
  
  6.   return function () { 
    7. 
  
  
  
  
  7.     // 保留调用时的this上下文 
    8. 
  
  
  
  
  8.     let context = this 
    9. 
  
  
  
  
  9.     // 保留调用时传入的参数 
    10. 
  
  
  
  
  10.     let args = arguments 
    11. 
  
  
  
  
  11.     // 每次事件被触发时，都去清除之前的旧定时器 
    12. 
  
  
  
  
  12.     if(timer) { 
    13. 
  
  
  
  
  13.         clearTimeout(timer) 
    14. 
  
  
  
  
  14.     } 
    15. 
  
  
  
  
  15.     // 设立新定时器 
    16. 
  
  
  
  
  16.     timer = setTimeout(function () { 
    17. 
  
  
  
  
  17.       fn.apply(context, args) 
    18. 
  
  
  
  
  18.     }, delay) 
    19. 
  
  
  
  
  19.   } 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21. // 用debounce来包装scroll的回调 
    22. 
  
  
  
  
  22. const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000) 
    23. 
  
  
  
  
  23. document.addEventListener('scroll', better_scroll)
    24.

用 Throttle 来优化 Debounce

debounce 的问题在于它“太有耐心了”。试想，如果用户的操作十分频繁——他每次都不等 debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。

为了避免弄巧成拙，我们需要借力 throttle 的思想，打造一个“有底线”的 debounce——等你可以，但我有我的原则：delay 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须要给用户一个响应。这个 throttle 与 debounce “合体”思路，已经被很多成熟的前端库应用到了它们的加强版 throttle 函数的实现中：

 
 
 
 
    
  
  
  
  
  1. // fn是我们需要包装的事件回调, delay是时间间隔的阈值 
    2. 
  
  
  
  
  2. function throttle(fn, delay) { 
    3. 
  
  
  
  
  3.   // last为上一次触发回调的时间, timer是定时器 
    4. 
  
  
  
  
  4.   let last = 0, timer = null 
    5. 
  
  
  
  
  5.   // 将throttle处理结果当作函数返回  
    6. 
  
  
  
  
  6.   return function () {  
    7. 
  
  
  
  
  7.     // 保留调用时的this上下文 
    8. 
  
  
  
  
  8.     let context = this 
    9. 
  
  
  
  
  9.     // 保留调用时传入的参数 
    10. 
  
  
  
  
  10.     let args = arguments 
    11. 
  
  
  
  
  11.     // 记录本次触发回调的时间 
    12. 
  
  
  
  
  12.     let now = +new Date()   
    13. 
  
  
  
  
  13.     // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值 
    14. 
  
  
  
  
  14.     if (now - last < delay) { 
    15. 
  
  
  
  
  15.     // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器 
    16. 
  
  
  
  
  16.        clearTimeout(timer) 
    17. 
  
  
  
  
  17.        timer = setTimeout(function () { 
    18. 
  
  
  
  
  18.           last = now 
    19. 
  
  
  
  
  19.           fn.apply(context, args) 
    20. 
  
  
  
  
  20.         }, delay) 
    21. 
  
  
  
  
  21.     } else { 
    22. 
  
  
  
  
  22.         // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应 
    23. 
  
  
  
  
  23.         last = now 
    24. 
  
  
  
  
  24.         fn.apply(context, args) 
    25. 
  
  
  
  
  25.     } 
    26. 
  
  
  
  
  26.   } 
    27. 
  
  
  
  
  27. } 
    28. 
  
  
  
  
  28. // 用新的throttle包装scroll的回调 
    29. 
  
  
  
  
  29. const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000) 
    30. 
  
  
  
  
  30. document.addEventListener('scroll', better_scroll)
    31.

分享题目：Javascript面试中经常被问到的三个问题！
分享地址：http://www.shufengxianlan.com/qtweb/news46/540796.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

用户体验知识

同城分类信息

云服务器　　 　成都众诚伟业　　 　二枢服务器托管　　 　蓬安网站建设　　 　青羊总部基地　　 　seo优化　　 　服务器租凭　　 　成都谷歌SEO　　 　成都网站排名　　 　网站运维托管　　 　微信公众号开发　　 　百度推广公司　　 　遂宁做网站　　 　广东帝美豪门窗　　 　成都网站建设　　 　成都水电改造　　 　酒柜书柜鞋柜定制　　 　德阳网站建设　　 　遂宁网站建设　　 　四川航空文化