前端面试题之手写代码

面试中经常会遇到的手写代码系列

函数防抖(debounce)

概念:在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

function debounce(fn, wait) {
   
  var timer = null;
  return function() {
   
    var context = this;
    var args = arguments;
    if (timer) {
   
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(function() {
   
      fn.apply(context, args);
    }, wait);
  };
}

函数节流 throttle

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

function throttle(fn, gapTime) {
   
  let _lastTime = null;

  return function() {
   
    let _nowTime = +new Date();
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
   
      fn();
      _lastTime = _nowTime;
    }
  };
}

手写 promise

剖析 Promise 内部结构，一步一步实现一个完整的、能通过所有 Test case 的 Promise 类

try {
   
  module.exports = Promise;
} catch (e) {
   }

function Promise(executor) {
   
  var self = this;

  self.status = "pending";
  self.onResolvedCallback = [];
  self.onRejectedCallback = [];

  function resolve(value) {
   
    if (value instanceof Promise) {
   
      return value.then(resolve, reject);
    }
    setTimeout(function() {
   
      // 异步执行所有的回调函数
      if (self.status === "pending") {
   
        self.status = "resolved";
        self.data = value;
        for (var i = 0; i < self.onResolvedCallback.length; i++) {
   
          self.onResolvedCallback[i](value);
        }
      }
    });
  }

  function reject(reason) {
   
    setTimeout(function() {
   
      // 异步执行所有的回调函数
      if (self.status === "pending") {
   
        self.status = "rejected";
        self.data = reason;
        for (var i = 0; i < self.onRejectedCallback.length; i++) {
   
          self.onRejectedCallback[i]