针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。防抖和节流就是针对响应跟不上触发频率这类问题的两种解决方案

因此针对这类事件要进行防抖动或者节流处理(通过防抖/节流控制触发频率,防止一个事件频繁触发回调函数)

防抖动(debounce )

特点:当事件快速连续不断触发时,动作只会执行一次。

用法:限制下次函数调用之前必须等待的时间间隔

本质:将多次执行变为最后一次执行

//窗口大小调整完毕后,在执行resize事件中的代码,通过闭包
window.onresize=debouce();
function getClient(){var winH = document.documentElement.clienHeight;var winW = document.documentElement.clienwidth;console.log(winH,winW);
}function debouce(){var timer;return function(){if (timer){ //如果有定时器,就清除clearTimeout(timer);}timer = setTimeout(getClient,2000); //再设置定时器 在resize事件结束的两秒后执行一次getCliten()}
}

节流阀(throttle )

比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流阀技术来实现。

特点:在连续高频触发事件时,动作会被定期执行,响应平滑,使得一定时间内只触发一次函数

本质:将多次执行变为每隔一段时间执行

//拖动滚动条时,每隔几秒才执行一次事件内容,通过闭包
window.onscroll = throttle();
function getScroll(){var winT = document.documentElement.scrollTop;console.log(winT);
}function throttle(){var timer;return function(){if(!timer){ //如果没有定时器,设置定时器setTimeout(function(){getSrollT();timer=null; //执行scroll事件后 执行一次getScroll() 再取消定时器},2000); //2s后再进入判断 设置定时器}}
}

共同点

都是用来做性能优化,都利用延迟定时器

区别

节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数, 而防抖动只是在最后一次事件后才触发一次函数。

总结

如果事件触发是高频但是有停顿时,可以选择debounce,动作只被执行一次
在事件连续不断高频触发时,选择throttling,动作每隔一段时间执行一次

防抖(debounce)和节流(throttle)相关推荐

  1. 防抖debounce和节流throttle

    大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...

  2. 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用

    函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 文章目录 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 1. 为什么要防抖节流 1.1 ...

  3. 探究防抖(debounce)和节流(throttle)

    本文来自我的博客,欢迎大家去GitHub上star我的博客 本文从防抖和节流出发,分析它们的特性,并拓展一种特殊的节流方式requestAnimationFrame,最后对lodash中的deboun ...

  4. Java版的防抖(debounce)和节流(throttle)

    概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时 节流(throttle) 当持续触发事件时, ...

  5. 函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析

    函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...

  6. 手写防抖(debounce)和节流(throttle)

    目录 测试代码 防抖(debounce) 基本功能实现 添加参数及this指向功能 第一次立即执行功能 取消功能 节流(throttle) 基本功能实现 增加this执向 最后一次在禁止时间段内是否执 ...

  7. 函数防抖debounce和节流throttle

    debounce 函数防抖 1.什么是函数防抖 函数防抖是优化高频率执行 js 代码的一种手段 可以让被调用的函数在一次连续的高频率操作过程中只被调用一次 2.函数防抖的作用 减少代码执行次数,提升网 ...

  8. 防抖(debounce) 和 节流(throttling)

    防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案. 在给DOM绑定事件时,有些事件我们是无法控制触发频率的. 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改 ...

  9. 防抖(debounce) 和 节流(throttling)的封装使用-最终发布npm

    函数的防抖节流 前言 防抖函数 防抖函数(雏形) 防抖函数1.0(使用了闭包) 防抖函数2.0(此版本开始才称得上是封装) 防抖函数3.0(希望第一次点击就立即触发) 防抖函数4.0(解决this指向 ...

最新文章

  1. oracle10g索引不生效,oracle 10g分区表索引失效测试
  2. 超好用的Swift 4.0 字符截取快速便捷方法
  3. Linux路由器的架设
  4. java jlable添加gif,Java动画GIF而不使用JLabel
  5. 主从同步设置的重要参数log_slave_updates
  6. C 怎么读取Cpp文件_python之调用C加速计算(一)
  7. werkzeug create_environ
  8. 说学习前端开发简单,如何才能成功上岸?
  9. 多台Linux服务器SSH相互访问无需密码
  10. 从语音识别到语义识别,中间还有多长的路要走?-模拟/电源-与非网
  11. Win11文件类型怎么改?Win11修改文件后缀的方法
  12. sublime text 批量删除空白行的方法
  13. Scaling SPADE to “Big Provenance”(论文阅读)
  14. TEST语言编译器--语法分析
  15. CSS3 - @keyframes
  16. python 正则表达式 断言 不定长表达式_【教程】详解Python正则表达式之: (?!…) negative lookahead assertion 前向否定匹配 /前向否定断言...
  17. PHP使用socks5代理发送邮件
  18. 解决VS在Release下编译程序报“应用程序无法启动,应用程序的并行配置不正确”的问题
  19. 【博学谷学习记录】超强总结,用心分享 | JavaSE入门基础知识总结
  20. 老毛桃win10pe 启动显示B1InitializeLibrary failed 0xc000009a解决方法

热门文章

  1. 手机怎么root权限
  2. uniapp app端导出excel的探索和实现(二)
  3. 湖南大学计算机专硕非全日制,湖南大学在职研究生是不是都是非全日制呢跟普通全日制有哪些不一样呢...
  4. nas918+支持的cpu_微星Afterburner超频软件更新:支持对RX 5700和RTX Super显卡的电压调整...
  5. obsidian日记使用方法
  6. 在文本框中插入图片:
  7. AI 路径如何 变成形状?
  8. 亚马逊封号潮暂停,部分账号开始解封,亚马逊防关联到底要怎么做
  9. acfun评论@(。´_`。)
  10. Oracle采用的数据模型,POSTGRES、ORACLE等数据库采用的数据模型面向对象的数据模型()...