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

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

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

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

1、节流(throttle)

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

代码示例：

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

2、防抖(Debounce)

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

代码示例：

 
 
 
  
  
  
// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间 
  
  
  
function debounce(fn, delay) { 
  
  
  
  // 定时器 
  
  
  
  let timer = null 
  
  
  
   
  
  
  
  // 将debounce处理结果当作函数返回 
  
  
  
  return function () { 
  
  
  
    // 保留调用时的this上下文 
  
  
  
    let context = this 
  
  
  
    // 保留调用时传入的参数 
  
  
  
    let args = arguments 
  
  
  
 
  
  
  
    // 每次事件被触发时，都去清除之前的旧定时器 
  
  
  
    if(timer) { 
  
  
  
        clearTimeout(timer) 
  
  
  
    } 
  
  
  
    // 设立新定时器 
  
  
  
    timer = setTimeout(function () { 
  
  
  
      fn.apply(context, args) 
  
  
  
    }, delay) 
  
  
  
  } 
  
  
  
} 
  
  
  
 
  
  
  
// 用debounce来包装scroll的回调 
  
  
  
const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000) 
  
  
  
 
  
  
  
document.addEventListener('scroll', better_scroll) 
 
 

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

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

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

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

代码示例：

 
 
 
  
  
  
// fn是我们需要包装的事件回调, delay是时间间隔的阈值 
  
  
  
function throttle(fn, delay) { 
  
  
  
  // last为上一次触发回调的时间, timer是定时器 
  
  
  
  let last = 0, timer = null 
  
  
  
  // 将throttle处理结果当作函数返回 
  
  
  
   
  
  
  
  return function () {  
  
  
  
    // 保留调用时的this上下文 
  
  
  
    let context = this 
  
  
  
    // 保留调用时传入的参数 
  
  
  
    let args = arguments 
  
  
  
    // 记录本次触发回调的时间 
  
  
  
    let now = +new Date() 
  
  
  
     
  
  
  
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值 
  
  
  
    if (now - last < delay) { 
  
  
  
    // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器 
  
  
  
       clearTimeout(timer) 
  
  
  
       timer = setTimeout(function () { 
  
  
  
          last = now 
  
  
  
          fn.apply(context, args) 
  
  
  
        }, delay) 
  
  
  
    } else { 
  
  
  
        // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应 
  
  
  
        last = now 
  
  
  
        fn.apply(context, args) 
  
  
  
    } 
  
  
  
  } 
  
  
  
} 
  
  
  
 
  
  
  
// 用新的throttle包装scroll的回调 
  
  
  
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000) 
  
  
  
 
  
  
  
document.addEventListener('scroll', better_scroll) 
 
 

问题2、事件委托代理

传统的事件绑定方式：

 
 
 
  
  
  
 
  
  
  
  Walk the dog
   
  
  
  Pay bills
   
  
  
  Make dinner
   
  
  
  Code for one hour
   
  
  
 
  
  
  
 
  
  
  
document.addEventListener('DOMContentLoaded', function() { 
  
  
  
  let app = document.getElementById('todo-app'); 
  
  
  
  let itimes = app.getElementsByClassName('item'); 
  
  
  
 
  
  
  
  for (let item of items) { 
  
  
  
    item.addEventListener('click', function(){ 
  
  
  
      alert('you clicked on item: ' + item.innerHTML); 
  
  
  
    }) 
  
  
  
  } 
  
  
  
}) 
 
 

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

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

 
 
 
  
  
  
document.addEventListener('DOMContentLoaded', function() { 
  
  
  
  let app = document.getElementById('todo-app'); 
  
  
  
 
  
  
  
  app.addEventListener('click', function(e) { 
  
  
  
    if (e.target && e.target.nodeName === 'LI') { 
  
  
  
      let item = e.target; 
  
  
  
      alert('you clicked on item: ' + item.innerHTML) 
  
  
  
    } 
  
  
  
  }) 
  
  
  
}) 
 
 

问题3、闭包的使用

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

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

不正确的闭包应用：

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

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

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

正确的闭包使用：

 
 
 
  
  
  
//方法一： 
  
  
  
const arr = [10, 12, 15, 21]; 
  
  
  
 
  
  
  
for (var i = 0; i < arr.length; i++) { 
  
  
  
  setTimeout(function(i_local){ 
  
  
  
    return function () { 
  
  
  
      console.log('The index of this number is: ' + i_local); 
  
  
  
    } 
  
  
  
  }(i), 3000) 
  
  
  
} 
  
  
  
 
  
  
  
//方法二： 
  
  
  
const arr = [10, 12, 15, 21]; 
  
  
  
for (let i = 0; i < arr.length; i++) { 
  
  
  
  setTimeout(function() { 
  
  
  
    console.log('The index of this number is: ' + i); 
  
  
  
  }, 3000); 
  
  
  
} 
 
 

分享文章：前端JS面试中经常会被问到的几个问题
分享网址：http://www.scanyue.cn/article/dhgocdj.html