前端JS面试中经常会被问到的几个问题

 本文不是讨论新的 JavaScript 库、常见的开发实践或任何新的 ES6 函数，只是聊聊在面试中出现频率比较高的的几道面试题。

成都创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站设计、网站制作、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

问题1、事件的节流(throttle)与防抖(debounce)

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

1、节流(throttle)

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

代码示例：

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

2、防抖(Debounce)

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

代码示例：

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

3、节流和防抖的实际应用

在我们的应用中，单一的应用节流或者防抖都不是一个好主意。

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

为了避免弄巧成拙，我们需要借力 throttle 的思想，打造一个“有底线”的 debounce——等你可以，但我有我的原则：delay 时间内，我可以为你重新生成定时器;但只要delay的时间到了，我必须要给用户一个响应。这个节流与防抖结合的思路。

代码示例：

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

问题2、事件委托代理

传统的事件绑定方式：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.   Walk the dog
    3.    
  
  
  3.   Pay bills
    4.    
  
  
  4.   Make dinner
    5.    
  
  
  5.   Code for one hour
    6.    
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8. document.addEventListener('DOMContentLoaded', function() { 
    9.   
  
  
  9.   let app = document.getElementById('todo-app'); 
    10.   
  
  
  10.   let itimes = app.getElementsByClassName('item'); 
    11.   
  
  
  11.  
    12.   
  
  
  12.   for (let item of items) { 
    13.   
  
  
  13.     item.addEventListener('click', function(){ 
    14.   
  
  
  14.       alert('you clicked on item: ' + item.innerHTML); 
    15.   
  
  
  15.     }) 
    16.   
  
  
  16.   } 
    17.   
  
  
  17. }) 
    18.

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

基于事件委托的代码示例：

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

问题3、闭包的使用

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

闭包基本上是内部函数可以访问其范围之外的变量。 闭包可用于实现隐藏变量和创建函数工厂。

不正确的闭包应用：

 
 
 
      
  
  
  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 。

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

正确的闭包使用：

 
 
 
      
  
  
  1. //方法一： 
    2.   
  
  
  2. const arr = [10, 12, 15, 21]; 
    3.   
  
  
  3.  
    4.   
  
  
  4. for (var i = 0; i < arr.length; i++) { 
    5.   
  
  
  5.   setTimeout(function(i_local){ 
    6.   
  
  
  6.     return function () { 
    7.   
  
  
  7.       console.log('The index of this number is: ' + i_local); 
    8.   
  
  
  8.     } 
    9.   
  
  
  9.   }(i), 3000) 
    10.   
  
  
  10. } 
    11.   
  
  
  11.  
    12.   
  
  
  12. //方法二： 
    13.   
  
  
  13. const arr = [10, 12, 15, 21]; 
    14.   
  
  
  14. for (let i = 0; i < arr.length; i++) { 
    15.   
  
  
  15.   setTimeout(function() { 
    16.   
  
  
  16.     console.log('The index of this number is: ' + i); 
    17.   
  
  
  17.   }, 3000); 
    18.   
  
  
  18. } 
    19.

名称栏目：前端JS面试中经常会被问到的几个问题
标题来源：http://www.gawzjz.com/qtweb/news5/161805.html

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

广告

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

猜你还喜欢下面的内容

软件开发知识

各行业网站

无边发光字厂家　　 　绵竹网站建设　　 　西云服务器托管　　 　中晴建设　　 　小谭网创广告　　 　php空间　　 　域名注册　　 　公路打桩机　　 　腾讯云香港免备案空间　　 　成都广告制作　　 　普特斯腐植酸　　 　成都关键词SEO优化　　 　手机app　　 　高端网站设计　　 　服务器托管　　 　建站定制开发　　 　企业网站设计　　 　网站优化排名推广　　 　信衡房屋鉴定　　 　雅安主机托管