2627. 函数防抖

说在前面

🎈不知道大家对于算法的学习是一个怎样的心态呢?为了面试还是因为兴趣?不管是出于什么原因,算法学习需要持续保持。

题目描述

请你编写一个函数,接收参数为另一个函数和一个以毫秒为单位的时间 t ,并返回该函数的 函数防抖 后的结果。

函数防抖 方法是一个函数,它的执行被延迟了 t 毫秒,如果在这个时间窗口内再次调用它,它的执行将被取消。你编写的防抖函数也应该接收传递的参数。

例如,假设 t = 50ms ,函数分别在 30ms 、 60ms 和 100ms 时调用。前两个函数调用将被取消,第三个函数调用将在 150ms 执行。如果改为 t = 35ms ,则第一个调用将被取消,第二个调用将在 95ms 执行,第三个调用将在 135ms 执行。

Debounce Schematic

上图展示了了防抖函数是如何转换事件的。其中,每个矩形表示 100ms,反弹时间为 400ms。每种颜色代表一组不同的输入。

请在不使用 lodash 的 _.debounce() 函数的前提下解决该问题。

示例 1:

输入:
t = 50
calls = [{"t": 50, inputs: [1]},{"t": 75, inputs: [2]}
]
输出: [{"t": 125, inputs: [2]}]
解释:
let start = Date.now();
function log(...inputs) { console.log([Date.now() - start, inputs ])
}
const dlog = debounce(log, 50);
setTimeout(() => dlog(1), 50);
setTimeout(() => dlog(2), 75);第一次调用被第二次调用取消,因为第二次调用发生在 100ms 之前
第二次调用延迟 50ms,在 125ms 执行。输入为 (2)。

示例 2:

输入:
t = 20
calls = [{"t": 50, inputs: [1]},{"t": 100, inputs: [2]}
]
输出: [{"t": 70, inputs: [1]}, {"t": 120, inputs: [2]}]
解释:
第一次调用延迟到 70ms。输入为 (1)。
第二次调用延迟到 120ms。输入为 (2)。

示例 3:

输入:
t = 150
calls = [{"t": 50, inputs: [1, 2]},{"t": 300, inputs: [3, 4]},{"t": 300, inputs: [5, 6]}
]
输出: [{"t": 200, inputs: [1,2]}, {"t": 450, inputs: [5, 6]}]
解释:
第一次调用延迟了 150ms,运行时间为 200ms。输入为 (1, 2)。
第二次调用被第三次调用取消
第三次调用延迟了 150ms,运行时间为 450ms。输入为 (5, 6)。

提示:

  • 0 <= t <= 1000
  • 1 <= calls.length <= 10
  • 0 <= calls[i].t <= 1000
  • 0 <= calls[i].inputs.length <= 10

解题思路

debounce 函数接受两个参数:fn 是需要执行的函数,t 是延迟时间(以毫秒为单位)。函数内部使用闭包来保存一个定时器变量 timer,并返回一个新的函数。这个新的函数会在被调用时设置一个延迟执行传入的函数 fn,如果在延迟时间内再次调用该函数,则会取消之前的定时器并重新设置新的定时器。

在示例用法中,我们使用 debounce 函数创建了一个名为 log 的函数,然后连续调用 log(‘Hello’)。由于设定了100ms的延迟时间,第一次和第二次调用都会被取消,只有第三次调用会在100ms后执行。

AC代码

/*** @param {Function} fn* @param {number} t milliseconds* @return {Function}*/
var debounce = function (fn, t) {let timer = null;return function (...args) {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn(...args);}, t);};
};/*** const log = debounce(console.log, 100);* log('Hello'); // cancelled* log('Hello'); // cancelled* log('Hello'); // Logged at t=100ms*/

公众号

关注公众号『前端也能这么有趣』,获取更多有趣内容。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux之vim的使用详细解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一.vim简介 二.vim的基本概念 三.vim的基本操作 3.1准备 …

状态空间模型(SSM)

论文&#xff1a;A new approach to linear filtering and prediction problems http://160.78.24.2/Public/Kalman/Kalman1960.pdf 状态空间模型介绍 术语状态空间模型具有非常广泛的含义&#xff0c;它简单地表示任何具有潜在状态的循环过程的概念。 它已被用来指代不同学科…

MySQL数据库进阶第四篇(视图/存储过程/触发器)

文章目录 一、视图简单介绍与基础语法二、视图的检查选项三、视图的更新四、视图的作用五、存储过程的概念与特点六、存储过程的 创建&#xff0c;调用&#xff0c;查看&#xff0c;删除七、存储过程 — 系统变量八、存储过程 — 用户定义变量九、存储过程 — 局部变量十、存储…

深入理解指针2

各位小伙伴们&#xff0c;我们继续来学习指针&#xff0c;指针和结构体以及动态内存管理对后面的数据结构学习有非常大的帮助&#xff0c;所有我们一定要把这些知识点学会。OK,正式进入学习之旅吧 1.数组名的理解 在上⼀个章节我们在使⽤指针访问数组的内容时&#xff0c;有这…

免费分享一套SpringBoot+Vue实验室(预约)管理系统,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue实验室(预约)管理系统 &#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue实验室(预约)管理系统 Java毕业设计_哔哩哔哩_bilibili【免费】SpringBootVue实验室(预约)管理系统 Java毕…

微信小程序 wxs内联与外联的写法

内联写法 <!-- 内联wxs --> <view>大写字母{{m1.toUpper("xmly")}}</view> <wxs module"m1">module.exports.toUpperfunction(str){return str.toUpperCase()} </wxs> 外联写法 新建一个wxs文件 写一个函数&#xff0c;将…

争取用一张图说清楚什么是编译器(Compiler)

抽完一颗烟&#xff0c;回来&#xff0c;突然看到了德州仪器的各个DSP芯片的编译器&#xff0c;想到了给编译器做个说明&#xff0c;争取对编译器概念有点糊涂的小朋友能突然一下明白&#xff0c; ┗|&#xff40;O′|┛ 嗷~~ 编译器就是 人机间 语言 的 翻译官&#xff08;Tra…

YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information

论文地址&#xff1a;https://arxiv.org/pdf/2402.13616.pdf 代码地址&#xff1a;GitHub - WongKinYiu/yolov9: Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information yolov7的作者更新了yolov9 摘要 当今的深度学习方…

TypeScript基础知识点

TypeScript 简介和发展 TypeScript 是一种由微软开发的开源编程语言&#xff0c;其设计目标是为了解决 JavaScript 在大规模应用开发时所面临的类型安全和可维护性问题。TypeScript 的诞生背景可以追溯到2012年&#xff0c;当时随着Web应用程序复杂度的日益增长&#xff0c;J…

PCIe 5.0 Layout Guide笔记

一、松耦合和紧耦合 松耦合优点是相同走线宽度下电介质更薄,同时对线间距的变化不敏感,提供了更好的阻抗控制;松耦合缺点是需要更大的区域进行绕线;紧耦合优点是更高的布线密度,相同阻抗下走线可以更细,同时具有更好的共模噪声抑制;紧耦合缺点是阻抗随线间距的变化大;【…

一个模板项目复制多个时候报错

复制的项目虽然用新idea打开&#xff0c;但是用的parent版本号&#xff0c;或者名字还是一个&#xff0c;这块要改&#xff0c;改版本号就行&#xff0c;子项目也改 循环依赖解决 pom中引入了循环依赖&#xff0c;pom已经最新&#xff0c;但是启动还是报错&#xff0c;idea缓…

基于Java的艺培管理解决方案

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

cmake构建在Visual stdio 2019 和Xcode的Qt的程序

概述&#xff1a;用CMake可以方便地构建Qt的应用程序&#xff0c;前提是你已经配置好用Visual Stdio 开发的Qt的环境或者Xcode的Qt开发环境。 1、编写CMakeLists.txt cmake_minimum_required(VERSION 3.6)set(CMAKE_CONFIGURATION_TYPES "Debug;Release" CACHE STR…

介绍 Gradio 与 Hugging Face

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 我们可以使用 Gradio 库为我们的模型构建演示。Gradio 允许您完全使用 Python 为任何机器学习模型构建、自定义和共享基于 Web 的演示。使机器学习模型变得可交互和易于使用。 为什么首先要为您的机器…

Parade Series - NVR Stat

获取文件夹占用空间信息 DIR %NVRHOME% /W /SDIR %NVRHOME% /s | tail -n2 | sed s/,//g | awk {if(NR1){key"Used";}else{key"Free";};sum$3/(1024*1024);unit"MB";if(sum^>1024){sumsum/1024;unit"GB";}printf("{\"Ty…

Ansible group模块 该模块主要用于添加或删除组。

目录 创建组验证删除组验证删除一个不存在的组 常用的选项如下&#xff1a; gid  #设置组的GID号 name  #指定组的名称 state  #指定组的状态&#xff0c;默认为创建&#xff0c;设置值为absent为删除 system  #设置值为yes&#xff0c;表示创建为系统组 创建组 ansib…

【Leetcode】938. 二叉搜索树的范围和

文章目录 题目思路代码结论 题目 题目链接 给定二叉搜索树的根结点 root&#xff0c;返回值位于范围 [low, high] 之间的所有结点的值的和。 示例 1&#xff1a; 输入&#xff1a;root [10,5,15,3,7,null,18], low 7, high 15 输出&#xff1a;32 示例 2&#xff1a; 输入…

linux+fortify

系统版本:Ubuntu22.04桌面版 一:登录root用户关闭防火墙 sudo passwd root systemctl stop ufw.service systemctl disable ufw.service 二:开启ssh服务 sudo apt update sudo apt install openssh-server sudo systemctl start ssh sudo systemctl status ssh连接上WinS…

笔记本如何录屏?很简单,我来告诉你

“最近遇到了一些工作上的问题&#xff0c;需要录制一些会议和讨论的内容&#xff0c;以便于后续的整理和回顾。但是&#xff0c;我没有使用过笔记本进行录屏&#xff0c;不知道该如何操作。大家有没有简单易懂的笔记本录屏指南&#xff0c;教教我&#xff01;” 在当今数字化…

vue3(vite)+electron打包踩坑记录(1)

vue3(vite)electron打包踩坑记录 - 打包vue 第一步 编译vue 使用vite构建vue&#xff0c;package.json如下 {"name": "central-manager","private": true,"version": "0.0.0","type": "commonjs",&q…