debounce 防抖函数

/*** 防抖* @param fn 防抖包裹的函数* @param delay 延迟时间* @param option 配置*      @param {Boolean} immediate 是否在高频事件触发时，立即执行一次*      @param {Boolean} immediate 1.是否在高频事件结束后 2.满足延迟时间后 再执行一次事件*          若 immediate = true & trailing = false , 则高频事件触发时，立即执行一次，事件触发终止 delay 后不会再执行回调*          若 immediate = true & trailing = true , 则高频事件触发时，立即执行一次，事件触发终止 delay 后会再执行一次回调*          若 immediate = false  则高频事件触发终止 dely 毫秒后执行一次回调 , trailing 设置失效*/
export function debounce(fn,delay = 500,option = { immediate: false, trailing: false }
) {let timer = null;return function () {if (timer) {window.clearTimeout(timer);}if (!option.immediate) {timer = window.setTimeout(() => {fn.apply(this, arguments);}, delay);} else {if (!timer) {fn.apply(this, arguments);}timer = window.setTimeout(() => {timer = null;if (option.trailing) {fn.apply(this, arguments);}}, delay);}};
}

debounce 防抖函数相关推荐

debounce实现 js_js 实现一个debounce防抖函数
debounce是指当函数被触发时,如果没有到我们设定的时间,函数不会执行,如果在设定时间之前多次触发,那么计时器会被重设,直到最后一次触发后过了设定的时间,函数才会真正执行. 一般的应用场景是:in ...
防抖函数Debounce实现
实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行. 手写一 ...
debounce实现 js_javascript防抖函数debounce详解
定义及解读防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次.假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 ...
函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章. Jerry之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request, ...
详解防抖函数（debounce）和节流函数（throttle）
函数防抖(debounce) 函数防抖,就是指触发事件后,在 n 秒后只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数的执行时间. 简单的说,当一个动作连续触发,只执行最后一次. 列举: ...
手把手教你实现一个防抖函数(debounce)
前言:防抖函数在日常开发中属于是一个非常非常重要的知识点.通常在一个项目的最开始构建的时候,都会在 utils文件夹下备上这样一个函数,来为以后做准备. (tips:utils 在大部分翻译软件内好像 ...
windows 改变文件大小函数_手写 bind call apply 方法与实现节流防抖函数
实现 bind call apply 方法 this 是什么? this是指包含它的函数作为方法被调用时所属的对象.这句话理解起来感觉还是很拗口的,但是如果你把它拆分开来变成这三句话后就好理解一点了. ...
防抖函数：多次触发后只执行第一次或者最后一次的函数
一. 应用场景当前问题: 现在点击一个按钮,然后会向服务器请求一次数据.如果暴力操作,不断的点击按钮,那么就会一直向服务器请求,这样肯定不好,需要应用到防抖函数. 最终目的:多次触发只执行最后一次或 ...

debounce 防抖函数

debounce 防抖函数相关推荐

最新文章

热门文章