节流与防抖初识

忘是亡心i 2023-02-21 06:29 18阅读 0赞

### 基于防抖和节流的性能优化 ###

当下网页中的交互越来越多，很多高频时间带来的性能问题，是一个绕不过去的坎。优化这些高频事件，防抖与节流必不可少。

#### 防抖函数与节流函数 ####

*  防抖：**就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。**
 *  节流：**就是指连续触发事件但是在一段时间中只执行一次函数**
 *  css重绘
 *  css回流

##### debounce(防抖) #####

防抖分为**立即防抖**和**非立即防抖**

非立即防抖：触发事件后函数不会立即执行，而是在n秒之后执行，如果n秒之内又触发了事件，则会重新计算函数执行时间。  
立即防抖：触发事件后会立即执行，然后n秒内不触发事件才会执行函数的效果

这是一个防抖代码

function debounce(fn, wait) {    // 防抖
            let timmer = null ;
            return function(){ 
                var args = arguments; 
                var now = !timmer;
                timmer &&  clearTimeout(timmer) // 当timmer存在清除
                timeer = setTimeout(()=>{ 
                    // fn.apply(this,args); 
                    timmer = null;
                },wait) ;
                if(now){ 
                    fn.apply(this,args);
                }
            }
        }

##### throttle(节流) #####

节流分为**时间戳**和**定时版本**

时间戳版节流

function jl(fn,wait){ 
            let last = 0
            return function(){ 
                var args = arguments;
                var now =  Date.now()
                if(now - last > wait){ 
                    fn.apply(this,args)
                    last = now;
                }
            }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关节流与防抖初识

基于防抖和节流的性能优化当下网页中的交互越来越多，很多高频时间带来的性能问题，是一个绕不过去的坎。优化这些高频事件，防抖与节流必不可少。防抖函数与节流函数

忘是亡心i/ 2023年02月21日 06:29/ 0 赞/ 19 阅读

相关节流和防抖

事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresize、windo

忘是亡心i/ 2022年11月29日 11:22/ 0 赞/ 423 阅读

相关前端面试系列-JavaScript-防抖与节流(用节流优化防抖)

文章目录一.函数防抖二、函数节流 1.时间戳实现 2.定时器实现 3.用节流优化防抖(定时器+时间戳) 三、

刺骨的言语ヽ痛彻心扉/ 2022年11月12日 11:58/ 0 赞/ 206 阅读

相关节流防抖

/ fn [function] 需要防抖的函数 delay [number] 毫秒，防抖期限值 / function debounce(fn,delay){

今天药忘吃喽~/ 2022年11月04日 12:24/ 0 赞/ 245 阅读

相关防抖、节流-JavaScript

防抖、节流防抖(debounce) JS中的防抖是指触发一个事件后，在一段时间内函数只执行一次，如果在这段时间内事件再次被触发，则重新计算这段时间。例如你进公

Love The Way You Lie/ 2022年09月11日 07:19/ 0 赞/ 253 阅读

相关节流和防抖

节流和防抖 > 作用：均是为节约计算机资源而生，也就是归属于优化方面 > 原理：均使用`setTimeout`来存放待执行的函数，很方便的利用它的延时机制来确定合适的

以你之姓@/ 2022年05月11日 10:42/ 0 赞/ 277 阅读

相关节流和防抖

在前端开发过程中，我们经常会遇到持续性触发的事件，如：点击事件、滚动事件以及拖拽等，但有时我们并不想让该事件如此频繁的执行时该怎么办呢？这时我们就要用到节流和防抖了，它们能大大

刺骨的言语ヽ痛彻心扉/ 2021年11月17日 14:42/ 0 赞/ 379 阅读

相关函数节流与防抖实现

问题引出：什么是函数节流？什么是函数防抖？ 1. 函数节流函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。函数节流限制一个函数在一定时间内

不念不忘少年蓝@/ 2021年11月10日 20:22/ 0 赞/ 388 阅读

相关节流和防抖

节流和防抖其实没那么高大上节流（throttle）和防抖（debounce）是 JS 中的两个概念，听上去挺高大上的，很多同学也望而却步了，加上这俩概念还很类似，所以也

野性酷女/ 2021年09月18日 02:26/ 0 赞/ 458 阅读

相关 js 的节流与防抖

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

朱雀/ 2021年04月16日 13:54/ 0 赞/ 578 阅读