手写JS之经典题目（持续更新）

手写一个 Promise

function Promise(executor) {
    let _this = this;
    this.state = 'pending' // 状态
    this.value = undefined; // 成功结果
    this.reason = undefined; // 失败原因

    this.onFulfilledFunc = []; // 保存成功回调
    this.onRejectedFunc = []; // 保存失败回调

    function resolve(value) {
        // 只有在pending状态下才可以改变状态
        if (_this.state == 'pending') {
            _this.value = value; // 保存成功结果
            _this.onFulfilledFunc.forEach(fn => { fn(value) });
            _this.state = 'resolved';
        }
    }

    function reject(reason) {
        // 只有在pending状态下才可以改变状态
        if (_this.state == 'pending') {
            _this.reason = reason; // 保存失败原因
            _this.onRejectedFunc.forEach(fn => { fn(reason) });
            _this.state = 'rejected';
        }
    }
    
	// 如果executor执行报错，直接执行reject
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
}

节流函数

节流函数确保一个函数在一个时间间隔内只会被执行一次，即使在这段时间内该函数被多次调用。这样可以保证在一定频率下执行任务，而不是积累大量待处理的任务。比如在滚动监听事件中，每滚动一段距离才执行一次计算或更新操作。

function throttle(func, delay) {
  let lastExecution = 0; // 记录上次执行的时间

  return function(...args) {
    const now = Date.now(); // 获取当前时间
    if (now - lastExecution > delay) { // 如果距离上次执行已经超过设定的delay时间
      func.apply(this, args); // 执行函数
      lastExecution = now; // 更新最后执行时间
    }
  };
}

防抖函数

防抖函数的作用是在一定时间内只执行一次操作，如果在设定的时间内再次触发，则重新开始计时。它常用于防止短时间内重复调用某个函数，比如搜索框实时搜索建议，在用户停止输入一段时间后再发送请求。

// 防抖函数实现
function debounce(fn, delay) {
  let timeoutId;

  // 返回一个包裹了原函数的防抖处理函数
  return function(...args) {
    if (timeoutId) {
      clearTimeout(timeoutId); // 如果存在定时器，则先清除
    }

    // 重新设置定时器，使原函数fn在delay毫秒后执行
    timeoutId = setTimeout(() => {
      fn.apply(this, args); // 在延时结束后调用原函数并传入参数
    }, delay);
  };
}