面试题2023

1. 手写防抖函数

当一个动作连续触发，只执行最后一次

function mydebounce(fn, delay) {
  let timer = null

  // 1.接收可能传入的函数
  const _debounce = function(...args) {
    if (timer) clearTimeout(timer)

    timer = setTimeout(() => {
      // 2.再将参数传给fn
      fn.apply(this, args)
      timer = null
    }, delay)
  }
  // 返回一个新的函数
  return _debounce
}

//测试代码：
<input type="text" />
<!-- 引用本地js文件 -->
<script src="./3.手写防抖.js"></script>
<script>
  const inputEl = document.querySelector("input");

  let counter = 1;
	// 传入event参数并打印进行测试
  function searchChange(event) {
    console.log(`第${counter++}次网络请求`, this.value, event);
  }

  // 使用自己封装的函数实现防抖
  inputEl.oninput = mydebounce(searchChange, 3000);
</script>

2. 手写节流函数

限制一个函数在一定时间内只能执行一次

function mythrottle(fn, interval) {
  let startTime = 0

  const _throttle = function(...args) {
    const nowTime = new Date().getTime()
    const waitTime = interval - (nowTime - startTime)

    if (waitTime <= 0) {
      // 只需要显式绑定this
      fn.apply(this, arg)
      startTime = nowTime
    }
  }

  return _throttle
}

//测试代码：
<input type="text" />
<!-- 引入自己的节流函数 -->
<script src="./4.手写节流.js"></script>
<script>
  const inputEl = document.querySelector("input");

  let counter = 1;
  function searchChange() {
    console.log(`第${counter++}次网络请求`, this.value);
  }


  // 实现节流
  inputEl.oninput = mythrottle(searchChange, 500);
</script>

3.手写实现EventEmitter

export default class EventEmitter {
  constructor() {
    this.event = {};
    this.maxListerners = 10;
  }
  // 监听
  on(type, listener) {
    if (this.event[type]) {
      if (this.event[type].length >= this.maxListerners) {
        console.error('同一个监听器最多被十个对象监听,否则可能造成内存泄漏.\n');
        return;
      }
      this.event[type].push(listener);
    } else {
      this.event[type] = [listener];
    }
  }
  //发送监听
  emit(type, ...rest) {
    if (this.event[type]) {
      this.event[type].map(fn => fn.apply(this, rest));
    }
  }
  //移除监听器
  removeListener(type) {
    if (this.event[type]) {
      delete this.event[type];
      console.log(this.event);
    }
  }
  //移除所有的监听器
  removeAllListener() {
    this.event = {};
  }
}
//调用：
import EventEmit from './EventEmit';
let DeviceEventEmit = new EventEmit();
DeviceEventEmit.on('event', (param1, param2) => {
  console.log('DeviceEventEmit', param1, param2);
});
DeviceEventEmit.emit('event', 'param1', 'param2');
DeviceEventEmit.removeListener('event');

4.图表渲染卡顿问题如何解决：

以Echars为例：
1.通过设置echarts的配置属性，如silent属性（是否响应和触发鼠标事件），减少不必要的数据触发事件的频次；showSymbol属性（是否显示点），不画数据点能减少部分卡顿压力，建议showSymbol和tooltip不一起使用。
2.和后台开发人员商量讨论，对数据进行压缩，减少数据量，或者流加载/分页懒加载方式。
3.优化ajax获取数据和处理数据的方法。