手写JS之经典题目(持续更新)

news/2024/7/19 13:33:07 标签: javascript, 开发语言, ecmascript, js, 前端

文章目录

    • 手写一个 Promise
    • 节流函数
    • 防抖函数

手写一个 Promise

javascript">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);
    }
}

节流函数

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

javascript">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; // 更新最后执行时间
    }
  };
}

防抖函数

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

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

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

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


http://www.niftyadmin.cn/n/5427731.html

相关文章

分享一个可以查看进程虚拟内存占用的 shell 脚本

分享一个可以查看进程虚拟内存占用的 shell 脚本 来源:https://gceasy.io/gc-recommendations/long-pause-solution.jsp 这里命名为 show_process_swap.sh #!/bin/bash # Get current swap usage for all running processes # Erik Ljungstrom 27/05/2011 # Mo…

Naive UI框架安装和引入使用

Naive UI介绍: 一个 Vue 3 组件库比较完整,主题可调,使用 TypeScript,注意,naive-ui 仅支持 Vue3。 1、 安装 naiva ui // 使用 npm 安装。npm i -D naive-ui 字体安 npm i -D vfonts 2、使用 直接引入&#xff…

unity3d Animal Controller的Animal组件中General基础部分理解

控制器介绍 动物脚本负责控制动物的所有运动逻辑.它管理所有的动画师和刚体参数,以及所有的状态和模式,动物可以做。 动物控制器 是一个动画框架控制器,根动或到位,为任何生物或人形。它利用刚体与物理世界的互动和动画师的玩动画。 States States 是不互相重叠的动画。例如…

Python (用户登录、身份归属地查询添加异常处理、绘制多角星、电影信息提取)

任务一:用户登录 登录系统通常分为普通用户与管理员权限,在用户登录系统时,可以根据自身权限进行选择登录。本任务要求实现一个用户登录的程序,该程序分为管理员用户与普通用户,其中管理员账号密码在程序中设定&#…

【系统架构师】-第19章-大数据架构设计理论与实践

四个特点: 大规模(Volume)、高速度(Velocity)和多样化(Variety),价值(Value)。 五个问题: 异构性(Heterogeneity)、规模…

neo4j 删除从一个node开始的所有数据。

一、 需求 删除红线右边重复的数据 二、 删除与中心点1的右边连线 2.1 中心点1橙色&#xff1a; <elementId>: 4:fbde4fa1-3453-4e00-91ce-92b16aec22e3:425 <id>: 425 fileName: /Users/guibing.gao/Desktop/lib2.2 查看与中新点1右边链接的node <elementId&…

C# 打开文件对话框(OpenFileDialog)

OpenFileDialog&#xff1a;可以打开指定后缀名的文件&#xff0c;既能单个打开文件也能批量打开文件 /// <summary>/// 批量打开文档/// 引用&#xff1a;System.Window.Fomrs.OpenFileDialog/// </summary>public void OpenFile(){OpenFileDialog dialog new Op…

接水问题(C++)

题意 学校里有一个水房&#xff0c;水房里一共装有 m个龙头可供同学们打开水&#xff0c;每个龙头每秒钟的供水量相等&#xff0c;均为 1。   现在有 n名同学准备接水&#xff0c;他们的初始接水顺序已经确定。 将这些同学按接水顺序从 1到 n编号&#xff0c;i号同学…