防抖函数 debounce promise版本debouncePromise

原创

已于 2024-09-24 14:03:00 修改 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-08-30 23:04:40 首次发布

普通函数版

/**
 * 函数防抖
 * @param fn
 * @param ms
 * @returns
 */
export const debounce = (fn: Function, ms = 300) => {
   
   
  let timeoutId: ReturnType<typeof setTimeout>
  return function (this: any, ...args:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

追求者2016

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js防抖函数返回值问题解决方案

见贤思齐焉，见不贤内自省

08-25

1886

需求：当我们在使用防抖函数的时候会碰到需要使用传入函数的返回值的问题，所以我们配合promise来实现。带有返回值的防抖函数： /** * @param {函数} fn * @param {防抖时间间隔} wait */ //防抖函数 const debounce = () => { let timer = null; const newDebounce = function(fn, wait, ...args) { return new Promise((r

手写promise、call、apply、debounce、throttle 等

zjq_1234的博客

05-29

578

手写常见方法实现

参与评论您还未登录，请先登录后发表或查看评论

debounce-promise:创建 Promise 返回函数的去抖动版本

08-05

去抖动承诺创建 Promise 返回函数的去抖动版本安装 npm i -S debounce-promise 使用示例 var debounce = require ( 'debounce-promise' ) function expensiveOperation ( value ) { return Promise . resolve ( value ) } var saveCycles = debounce ( expensiveOperation , 100 ) ; [ 1 , 2 , 3 , 4 ] . forEach ( num => { return saveCycles ( 'call no #' + num ) . then ( value => { console . log ( value ) } ) } ) // Will only c

探秘Awesome Debounce Promise：让异步调用更智能！

gitblog_00091的博客

05-23

525

探秘Awesome Debounce Promise：让异步调用更智能！在开发React应用时，我们常常面临一个挑战：如何优雅地处理频繁的异步请求，避免性能瓶颈和不必要的网络负担？这就是Awesome Debounce Promise要解决的问题。这个小巧而强大的库，专为React设计，但也能在其他环境中发挥效用。项目介绍 Awesome Debounce Promise是一个轻量级的解决方案...

防抖和节流（附带promise版）

cc的博客

04-20

1975

promise 防抖和节流

JavaScript函数的防抖和节流

Doug_的博客

02-25

536

JavaScript防抖和节流。promise防抖

防抖Debounce实现

wwwqiaoling的博客

03-18

313

防抖是属于体验优化的一个手段，咱们来看下一个具体的情景，在输入框中输入信息，然后触发change事件，如果一直输入，那就回一致触发这个事件，体验就不太友好，如果等用户输入暂停的时候再触发就好很多了。对于上面的问题，咱们可以先设置一个定时器，输入暂停后，并且到了定时的时间再触发change事件。页面元素比较简单，就不写了，直接写逻辑代码吧！废话不多说，直接上代码！ // 首先获取目标元素 c...

javascript防抖函数debounce详解

10-16

JavaScript中的防抖函数(debounce)是一种优化技术，用于限制函数的执行频率，特别是在处理高频触发的事件时，如窗口的滚动、输入框的输入等。防抖函数的主要目的是避免在短时间内重复执行函数，而是等待一段时间无...

精选资源

Javascript节流函数throttle和防抖函数debounce

01-18

问题的引出　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器...在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.j

js：Promise理解、async和await的理解、宏任务/微任务、异常处理、防抖和节流

Litt_White的博客

08-14

6064

Promise理解、async和await的理解（未完成）、构造函数/原型/原型链、防抖和节流、this指向（普通函数，箭头函数，JS/Vue的this）、上下文环境、作用域和闭包

debounce-promise 项目常见问题解决方案

最新发布

gitblog_00373的博客

01-19

538

debounce-promise 项目常见问题解决方案 debounce-promise 是一个开源项目，它允许开发者创建一个防抖版本的Promise返回函数。这个项目的目的是在处理高频事件（如窗口大小调整、滚动、键盘事件等）时，优化性能和资源消耗。该项目主要使用JavaScript编程语言。新手常见问题及解决步骤问题一：如何安装和使用 debounce-promise 问题描述：新手可能不...

debounce-promise 使用教程

gitblog_00259的博客

09-01

474

debounce-promise 使用教程项目介绍 debounce-promise 是一个用于 JavaScript 的库，旨在通过防抖（debounce）机制来优化异步函数调用。防抖是一种技术，用于限制函数在短时间内被频繁调用的次数，从而提高性能和减少资源消耗。项目快速启动安装首先，你需要通过 npm 安装 debounce-promise： npm install debounce-...

【web前端】(手写js) 函数防抖|节流实现、Promise实现、Ajax实现

sinat_39394862的博客

05-01

2981

js手写函数节流防抖、promise、Ajax等方法

js前端手撕代码系列（promise，防抖，节流，原生ajax，封装promise等）

qq_43569680的博客

03-23

611

防抖与节流介绍通过防抖（debounce）和节流（throttle）的方式来减少调用频率，减少资源浪费防抖: n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时（用搭电梯形容：电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖）节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效（用搭电梯形容：电梯第一个人进来后，15秒后准时运送一次，这是节流）区别相同点都可以通过使用 setTimeout 实现目的

javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝

04-07

1806

本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map

debounce防抖函数的使用（js和vue）

trigger的博客

08-24

4701

debounch防抖函数主要应用场景，解决按钮快速点击，多次请求的问题和input输入框多次请求的问题。接下来直接介绍在js和vue项目中的使用方式。lodash工具库地址：https://lodash.com/docs#debounce 三个参数： _.debounce(func, [wait=0], [options={}]) options有如下三个可选参数配置： leading：指定在延迟开始前是否执行func（默认为false）。 maxWait：设置func...

【JS】一些手写函数：深拷贝、bind、debounce等

Greenary的博客

02-27

640

深拷贝：前提知识：typeof ，==，值类型和引用类型，instanceof，for...in遍历，hasOwnProperty typeof 1 'number' typeof 1.2 'number' typeof 'ss' 'string' typeof null 'object' typeof undefined 'undefined' typeof [] 'object' typeof {} 'object' typeof true 'boolean' typeof Symbol 'fu

debounce实现 js_javascript – 使用promises实现的Debounce功能

weixin_39821605的博客

12-22

312

我找到了一个更好的方法来实现承诺：function debounce(inner, ms = 0) {let timer = null;let resolves = [];return function (...args) {// Run the function after a certain amount of timeclearTimeout(timer);timer = setTimeou...

一二八、【源码阅读篇】ahooks -- useDebounce、useDebounceFn、useCreation、useUnmount、usePersistFn

梅某某

03-19

4727

useDebounce import { useState, useEffect } from 'react'; import useDebounceFn from '../useDebounceFn'; import { DebounceOptions } from './debounceOptions'; /** * @description: 用来处理防抖值的 Hook。 * @param {T} value 需要防抖的值 * @param {DebounceOptions} options