JS手写函数剖析，揭秘面试中的刁钻题目

前端

2023-12-18 10:24:58

JavaScript手写函数的剖析

1. 防抖和节流函数

防抖和节流函数是两个非常实用的函数，它们可以优化页面的性能，提高用户体验。

防抖函数：

原理：把触发非常频繁的事件合并成一次去执行

实现：在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计时。

节流函数：

原理：规定在一个单位时间内，只能触发一次函数执行

实现：无论事件触发得多频繁，函数只会在规定的时间间隔内执行一次。

2. 手写题的剖析

面试中的JS手写题往往会考察以下几个方面：

基础知识：

考察候选人对JavaScript基础知识的掌握情况，包括变量声明、函数定义、对象操作、数组操作等。

创造力：

考察候选人的创造力，鼓励他们提出新的解决方案，展示他们的想象力和思维能力。

解决问题的能力：

考察候选人解决问题的能力，要求他们能够快速分析问题，找到问题的根源，并提出有效的解决方案。

常见的面试题

1. 实现一个防抖函数

function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      const callNow = !timeout;
      timeout = setTimeout(() => {
        timeout = null;
      }, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    }
  };
}

2. 实现一个节流函数

function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = new Date().getTime();
    if (now - lastTime < wait) {
      return;
    }
    lastTime = now;
    func.apply(context, args);
  };
}