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

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

[[285702]]

问题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、事件委托代理

传统的事件绑定方式：

<ul id="todo-app"> 
  <li class="item">Walk the dog</li> 
  <li class="item">Pay bills</li> 
  <li class="item">Make dinner</li> 
  <li class="item">Code for one hour</li> 
</ul> 
 
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); 
}