简评：在这篇文章中，作者总结了 3 个在 JavaScript 面试问题中问得最多的问题（不清楚国内是不是）。这三个问题不是关于任何库的用法或 ES6 的新功能，而主要是对原生 JavaScript 的理解。
Question #1: 事件代理
当创建一个应用时，不可避免的会遇到监听事件触发的需求。这里有一个小的简单的待办列表要完成，想要在用户点击其中一个列表项时触发一个动作。下面是一段 HTML 代码：
<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 items = app.getElementsByClassName('item');
// attach event listener to each item
for (let item of items) {
item.addEventListener('click', function() {
alert('you clicked on item: ' + item.innerHTML);
});
}
});
当然这样写在技术上是完全可以的，唯一的问题就是当列表项过多的时候（比如 10,000 个），你的这段函数就将会同时创建 10,000 个监听函数。
下面是一种更有效率的写法：
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('todo-app');
// attach event listener to whole container
app.addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
let item = e.target;
alert('you clicked on item: ' + item.innerHTML);
}
});
});
Question #2: 在循环中使用闭包
闭包是 JavaScript 的一个重要特性，开发者可以用来模拟私有方法。在这里有个简单的问题：
实现一个函数，循环遍历整数列表，并在 3 秒后打印每个元素的索引。
一个常见的错误实现：
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);
}
如果你执行这段代码，会发现每次输出的是 4 而不是按顺序的 0,1,2,3。
原因在于 setTimeout 创建了一个匿名函数并访问处于外部的变量 i，都处于同一环境中。当 console.log 被调用的时候，匿名函数保持对外部变量 i 的引用，此时 for 循环已经结束， i 的值被修改成了 4。为了得到想要的结果，需要在每次循环中创建变量 i 的拷贝。
事实上正确的写法有好几种，这里列举用得最多的两种：
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
// pass in the variable i so that each function
// has access to the correct index
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++) {
// using the ES6 let syntax, it creates a new binding
// every single time the function is called
// read more here: http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads
setTimeout(function() {
console.log('The index of this number is: ' + i);
}, 3000);
}
Question #3: Debouncing
有一些浏览器事件可以在很短的时间内快速启动多次，例如调整窗口大小或滚动页面。如果你在窗口滚动上绑定了事件，那么可能在用户滚动页面的几秒钟里，你的事件方法就执行了数千次，这就会导致很严重的性能问题。
一个真实的案例就是 2011 年 Twitter，在你滚动 Twitter feed 时，其会变得非常慢甚至未响应。这里有一篇 blog 就详细讲了当时的这个 bug，也就是在 scroll 事件上绑定一个复杂函数是多糟的主意。
Debouncing 就是解决这个问题的一种方法，简单来说就是限制函数调用的间隔时间。如果在时间间隔内再次触发事件，就重启定时器并忽略掉这次事件。
// debounce function that will wrap our event
function debounce(fn, delay) {
// maintain a timer
let timer = null;
// closure function that has access to timer
return function() {
// get the scope and parameters of the function
// via 'this' and 'arguments'
let context = this;
let args = arguments;
// if event is called, clear the timer and start over
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}
使用：
// function to be called when user scrolls
function foo() {
console.log('You are scrolling!');
}
// wrap our function in a debounce to fire once 2 seconds have gone by
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));
与 Debouncing 类似的技术是 Throttling，同样也是使用计时器来控制事件的触发，不同之处在于 Throttling 没有忽略掉事件，而是延迟触发。如果想了解更多，可以进一步阅读下面的这几篇文章。
扩展阅读：
- Throttling and Debouncing in JavaScript
- The Difference Between Throttling and Debouncing
- Examples of Throttling and Debouncing
- Remy Sharp’s blog post on Throttling function calls
原文：3 JavaScript questions to watch out for during coding interviews
欢迎关注知乎专栏「极光日报」，每天为 Makers 导读三篇优质英文文章。
网友评论