前端JS面试中经常会被问到的问题有哪些

本篇内容介绍了“前端JS面试中经常会被问到的问题有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

问题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); }

“前端JS面试中经常会被问到的问题有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！